CODEWITHSUNDEEP
androiduser-interfacesliderandroid-jetpack-composeandroid-jetpack-compose-material3
Yonibagi
Yonibagi

Reputation: 177

Change Circle shape of Thumb in Slider Jetpack compose

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

enter image description here

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

enter image description here

Upvotes: 4

Views: 4452

Answers (3)

user8251233
user8251233

Reputation: 19

You can use ShapeSlider : The "Compose slider" supports Track and Thumb designed by self using Shape or Modifier

Upvotes: -1

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364730

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)
            )
        },
    )
}

enter image description here

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

Upvotes: 7

bylazy
bylazy

Reputation: 1305

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)
...

Upvotes: 0

Related Questions