Jetpack Compose Change Slider Thumb Size

Question

Is there any way to change slider thumb size? I think for now we can only manipulate colors

var sliderPosition by remember { mutableStateOf(0f) }
Text(text = sliderPosition.toString())
Slider(
    value = sliderPosition,
    onValueChange = { sliderPosition = it },
    valueRange = 0f..100f,
    onValueChangeFinished = {
        // launch some business logic update with the state you hold
        // viewModel.updateSelectedSliderValue(sliderPosition)
    },
    steps = 5,
    colors = SliderDefaults.colors(
        thumbColor = MaterialTheme.colors.secondary,
        activeTrackColor = MaterialTheme.colors.secondary
    )
)

Answer 1

With M3 androidx.compose.material3.Slider you can use the thumb attribute to customize the size.

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 = {
            SliderDefaults.Thumb( //androidx.compose.material3.SliderDefaults
                interactionSource = interactionSource,
                thumbSize = DpSize(40.dp,40.dp)
            )
        },

    )
}

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

Answer 2

No, this size cannot be modified. The only thing you can do is copy the entire Slider.kt file into your project and modify it.

It is a good idea to give the new view a different name to avoid misunderstandings in the future.

You should change ThumbRadiusconstant, or make it a variable if you need different sizes in your application.