IssueTracker

Jetpack Compose version: 2024.12.01

Material Library Version (M2, M3 or Both?): M3

Material Compose component used: RangeSlider

Kotlin version: 1.7.20

Steps to Reproduce or Code Sample to Reproduce:

1. Create a RangeSlider
2. Move both of the thumbs to the same position (collide with each other)

val valueRange = 0f..100f
var value by remember { mutableStateOf(valueRange) }
val startInteractionSource = remember { MutableInteractionSource() }
val endInteractionSource = remember { MutableInteractionSource() }

RangeSlider(
    modifier = Modifier.fillMaxWidth().sizeIn(maxHeight = 50.dp),
    value = value,
    onValueChange = {
          value = it
     },
     valueRange = valueRange,
     startInteractionSource = startInteractionSource,
     endInteractionSource = endInteractionSource,
     startThumb = {
          Thumb(interactionSource = startInteractionSource)
     },
     endThumb = {
          Thumb(interactionSource = endInteractionSource)
     }
)

Problem : The selection of active/dragging thumb when the thumbs are collide with each others is a problem.

Root cause : The logic to select which thumb is currently dragging in the rangeSliderPressDragModifier inside the rangeSliderLogic.compareOffsets

Details :

1. When the thumb position is colliding in UI, the calculation of offset of start and end thumb in the state.rawOffsetStart and state.rawOffsetEnd with the X position will make the result always be the other thumb that is not what you dragged previously.
2. Because the rangeSliderPressDragModifier is set internally inside the RangeSliderImpl, there is no way we can override the logic.

file : material3/Slider.kt
start line : 739
val pressDrag =
        Modifier.rangeSliderPressDragModifier(
            state,
            startInteractionSource,
            endInteractionSource,
            enabled
        )
...
...
file : material3/Slider.kt
start line : 780
modifier =
            modifier
                .minimumInteractiveComponentSize()
                .requiredSizeIn(minWidth = ThumbWidth, minHeight = TrackHeight)
                .then(pressDrag)

Example (the video attached) :

1. Drag the left thumb until collide with the right thumb.
2. Drag again (the active thumb will be the right thumb), so it won't be possible to drag to the left. But you can drag to the right.
3. Same if you drag the right thumb until collide with the left thumb.
4. Drag again (the active thumb will be the left thumb), so it won't be possible to drag to the right. But you can drag to the left.

Question/Request :

1. Is it possible to also consider the drag direction when deciding which thumb is active/dragging?
2. Is it possible to make the logic overridable?
3. Is it possible to set the minimum thumbs gap (if there is no solution to fix the issue when the thumbs are colliding)?
4. Any other solution to fix this issue?

Thank you very much Best regards