Maiko Trindade
Maiko Trindade

Reputation: 3049

How to remove drag effect when moving a Slider in Jetpack Compose

I'd like to remove the drag effect from the slider tick and I move it. I don't want to have this light purple circle in the image below.

enter image description here

I'm aware of interactionSource param in the Slider component but I'm not handling it properly to remove/disabled the drag effect.

Here is my actual code:

var sliderWeight by remember { mutableStateOf(0f) }
Text(text = sliderWeight.toString())
Slider(value = sliderWeight, onValueChange = { sliderWeight = it }, interactionSource = remember { MutableInteractionSource() })

Upvotes: 2

Views: 1635

Answers (1)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364401

There isn't a parameter to define the halo color or the halo radius, but you can provide a custom LocalRippleTheme to override the default behaviour.

Something like:

CompositionLocalProvider(LocalRippleTheme provides NoRippleTheme) {
    Slider(
        value = sliderWeight,
        onValueChange = { sliderWeight = it },
    )
}

private object NoRippleTheme : RippleTheme {
    @Composable
    override fun defaultColor() = Color.Unspecified

    @Composable
    override fun rippleAlpha(): RippleAlpha = RippleAlpha(0.0f,0.0f,0.0f,0.0f)
}

enter image description here

Upvotes: 4

Related Questions