CODEWITHSUNDEEP
sliderpadding
MikeL
MikeL

Reputation: 31

Remove default padding inside Slider component of Jetpack Compose

Below is the code and the image with background to see the padding I want to remove

private fun SimpleSlider() {

var sliderValue by remember { mutableStateOf(5.5f) }

Slider(
    modifier = Modifier
        .background(Color.Magenta),
    value = sliderValue,
    onValueChange = { sliderValue_ ->
        sliderValue = sliderValue_
    },
    onValueChangeFinished = {
        // this is called when the user completed selecting the value
        Log.d("MainActivity", "sliderValue = $sliderValue")
    },
    valueRange = 0f..10f
)

Text(text = sliderValue.toString())}

enter image description here

Upvotes: 2

Views: 1396

Answers (2)

ElsayedDev
ElsayedDev

Reputation: 650

just wrap it with CompositionLocalProvider for slider or other Widget

CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) {
    Slider(
        value = progress, onValueChange = onValueChange,
        onValueChangeFinished = {
            onDragEnd(progress)
        },
        valueRange = 0f..1f,
        colors = SliderDefaults.colors(
            thumbColor = Color.Red,
            activeTrackColor = Color.Red,
            inactiveTrackColor = Color.Gray
        ),
        modifier = modifier

    )
}

Upvotes: 0

Sandesh Baliga
Sandesh Baliga

Reputation: 663

Just wrap it like this:

CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) {
    Slider()...
}

This will remove the 48dp min size restriction for the slider.

Upvotes: 4

Related Questions