androidandroid-layoutmaterial-designandroid-jetpack-composeandroid-slider

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() })

Solution

  • 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