Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove the extra padding around the thumb of a Slider?

I recently updated material libraries and as I see now there is extra horizontal space around thumb, but could not find any info about how to remove it. Has anyone found a way to solve this issue?

CompositionLocalProvider(LocalRippleConfiguration provides null) {
            Slider(
                value = sliderValue,
                onValueChange = { newValue ->
                    sliderValue = newValue
                    onValueChange(newValue)
                },
                valueRange = valueRange,
                steps = steps,
                thumb = {
                    Image(
                        painter = painterResource(R.drawable.ic_thumb_inverted),
                        contentDescription = null,
                        modifier = Modifier
                            .size(48.dp)
                            .testTag("thumb"),
                    )
                },
                track = { sliderState ->
                    SliderDefaults.Track(
                        drawStopIndicator = {},
                        modifier = Modifier
                            .scale(scaleX = 1f, scaleY = 0.8f),
                        sliderState = sliderState,
                        colors = SliderDefaults.colors(
                            activeTrackColor = neonBlue,
                            activeTickColor = Color.Transparent,
                            inactiveTickColor = Color.Transparent,
                            inactiveTrackColor = linkWater2Blue,
                            thumbColor = Color.Transparent,
                        ),
                    )
                },
                modifier = Modifier
                    .constrainAs(slider) {
                        start.linkTo(parent.start)
                        end.linkTo(parent.end)
                        top.linkTo(parent.top)
                        width = Dimension.fillToConstraints
                    }
                    .testTag("slider"),
            )
        }

enter image description here

like image 966
Javokhir Sherbaev Avatar asked Aug 31 '25 03:08

Javokhir Sherbaev


1 Answers

The Material3 Design Guidelines specify that there should be this gap of width 6.dp on both sides of the handle. However, you can modify this using the thumbTrackGapSize parameter of SliderDefaults.Track Composable:

Slider(
    //...
    track = { sliderState ->
        SliderDefaults.Track(
            sliderState = sliderState,
            thumbTrackGapSize = 0.dp,
            //...
        )
    }
)

Output:

Screenshot

like image 117
BenjyTec Avatar answered Sep 02 '25 21:09

BenjyTec