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

Question

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.

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

Answer 1

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