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

1 Answer 1

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: