Jetpack Compose thumb image

Question

What would be the best way to change the Compose Slider thumb image. Now it is possible to change the color but not an image? I was thinking to use a Box() with a Slider and Image on top but not sure how to implement it

Answer 1

With M3 androidx.compose.material3.Slider you can use the thumb attribute to use a custom thumb.

For example you can use an Image,something like:

var sliderPosition by remember { mutableStateOf(0f) }
Column {
    Text(text = sliderPosition.toString())
    Slider(
        modifier = Modifier.semantics { contentDescription = "Localized Description" },
        value = sliderPosition,
        onValueChange = { sliderPosition = it },
        valueRange = 0f..5f,
        steps = 4,
        interactionSource = interactionSource,
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
        },
        thumb = {
            Image(painterResource(id = R.drawable.ic_launcher_background),"contentDescription")
        }

    )
}

or a simple Icon:

var sliderPosition by remember { mutableStateOf(0f) }
Column {
    Text(text = sliderPosition.toString())
    Slider(
        modifier = Modifier.semantics { contentDescription = "Localized Description" },
        value = sliderPosition,
        onValueChange = { sliderPosition = it },
        valueRange = 0f..5f,
        steps = 4,
        interactionSource = interactionSource,
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
        },
        thumb = {
            Icon(
                imageVector = Icons.Filled.Favorite,
                contentDescription = null,
                modifier = Modifier.size(ButtonDefaults.IconSize),
                tint = Color.Red
            )
        }

    )
}

Note: it requires for material3 at least the version 1.0.0-beta03