Change Circle shape of Thumb in Slider Jetpack compose

Question

The Slider in Jetpack Compose allows changing the color of the thumb but not the shape. I'm looking solution to change the shape of the thumb from circle to rectangle as represented in the attached image

I tried to add Slider.kt file to the project as mentioned here but, strangely, when I copy this code to the project I got a lot of errors, see attached screenshot

Answer 1

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

You can use a simple Spacer or a Box to obtain a Rectangle:

var sliderPosition by remember { mutableStateOf(0f) }
val interactionSource = MutableInteractionSource()

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 = {
            val shape = RectangleShape 
            Spacer(
                modifier = Modifier
                    .size(20.dp)
                    .indication(
                        interactionSource = interactionSource,
                        indication = rememberRipple(
                            bounded = false,
                            radius = 20.dp
                        )
                    )
                    .hoverable(interactionSource = interactionSource)
                    .shadow(if (enabled) 6.dp else 0.dp, shape, clip = false)
                    .background(Red, shape)
            )
        },
    )
}

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

Answer 2

Here is a source code for Slider composable.

You can copy it to your project, rename, and change the Thumb shape in the SliderThumb composable:

...
.shadow(if (enabled) elevation else 0.dp, CircleShape, clip = false)
.background(colors.thumbColor(enabled).value, CircleShape)
...