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"),
)
}
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:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With