Android compose: customize Slider thumb and tick

Question

I would like to customize the Slider discrete component .

https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#Slider(kotlin.Float,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Int,kotlin.Function0,androidx.compose.material3.SliderColors,androidx.compose.foundation.interaction.MutableInteractionSource).

I tried something like :

Slider(
    value = defaultLevel.toFloat(),
    onValueChange = onValueChange,
    valueRange = 0..10,
    modifier = Modifier.size(300.dp, 80.dp),
    steps = 4,
    enabled = true,
    colors = colors,
    thumb = {
        SliderDefaults.Thumb(
            interactionSource = interactionSource,
            colors = colors,
            modifier = Modifier
                .size(width = 10.dp, height = 50.dp)
                .indication(
                    interactionSource = interactionSource,
                    indication = rememberRipple(
                        bounded = false,
                        radius = 20.dp
                    )
                )
                .hoverable(interactionSource = interactionSource)
                .background(defaultColor, RectangleShape)
        )
    }
)

But the result is not the one expected. The "UI" is good, but the thumb is not centered with the tick. I can see two boxes actually in the "inspector tool". My new thumb and another one which is larger and seems to be the "default one" with the circle.

How is it possible to "center" my custom thumb or at least, to specify the position to be align with the tick ?

Another ask, how to handle the tick ? I can't find a way to customize it.

I've added an image of the current result @GabrieleMariotti. The expected result is just to have the new thumb "over" the tick component. — deveLost, Jan 10 '23 at 07:18

Gabriele Mariotti · Answer 1 · 2023-01-10T14:43:57.617

3

Currently the Thumb seems to have issues with alignment using a size < 20.dp.

You can use:

Slider(
//..,
    thumb = {
            SliderDefaults.Thumb(
                interactionSource = interactionSource,
                thumbSize = DpSize(20.dp, 50.dp)
            )
    }
)

or a workaround like:

Slider(
//..,
    thumb = {
            SliderDefaults.Thumb(
                interactionSource = interactionSource,
                modifier = Modifier.offset(x=5.dp),
                thumbSize = DpSize(10.dp, 50.dp)
            )
    }
)

edited Jan 10 '23 at 14:43

answered Jan 10 '23 at 07:48

Gabriele Mariotti

320,139
94
887
841

Thanks for you answer! This is what I've done in the meantime actually, defining an offset... Where did you see the min value was enforced to 20dp? Thank you:) – deveLost Jan 10 '23 at 07:55
@deveLost I should debug the Slider code. – Gabriele Mariotti Jan 10 '23 at 08:06
Ok thanks anyway :) Btw, dunno if it's linked, but I can"t move the thumb, do you have any idea why ? (when I run it in preview) Did I miss something in the implementation ? – deveLost Jan 10 '23 at 12:23

Android compose: customize Slider thumb and tick

1 Answers1