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

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

• kotlin
• android-jetpack-compose
• slider
• material3

Share Improve this question Follow edited Dec 3, 2024 at 10:05 BenjyTec 11.2k44 gold badges2424 silver badges5050 bronze badges asked Nov 16, 2024 at 15:24 Javokhir SherbaevJavokhir Sherbaev 15122 silver badges77 bronze badges 0

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

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: