[Slider] Swap thumbs on range slider when thumbs are overlapping

[benjavicente]

Coming from @mui/base, @base-ui-components/react seems to lack the correct thumb placement (will be fixed with #1175), marks, and the ability to swap thumbs. While swapping values does not follow the Slider WAI-ARIA design pattern (see relevant RadixUI discussion about that), swapping might provide better UX, specially when thumbs are overlapping.

Where is a comparison with@base-ui-components/react vs @mui/base. In the base ui example, since the clicks happen on the left side of the thumb, the left thumb is selected, even thought there is an intent to slide to the right.

Screen.Recording.2024-12-23.at.14.04.18.mov

Screen.Recording.2024-12-23.at.14.06.45.mov

So, it could be great to have the ability to enable always thumb swaping like in mui-base, and would be amazing if this library manages to include a threshold of when it should overlap. I couldn't find a library that does this last behavior 🤔

[mj12albert]

Related to #420

@benjavicente We decided to not allow thumbs to cross each other for two main reasons:

1. In the legacy package, the thumbs never actually swap positions. When they appear to "swap", focus just magically moves to the other thumb which is not great for accessibility.
2. Solving the above means actually reordering the thumb components/elements in the DOM as they are dragged around, and will require a more complicated API - e.g. using a function child to render thumbs, instead of manually composing them one by one - which is also something we want to avoid at the moment

would be amazing if this library manages to include a threshold of when it should overlap. I couldn't find a library that does this last behavior 🤔

There is a minStepsBetweenValues prop that you can use to enforce the min distance between thumbs and prevent overlap (denominated in no. of steps) in a range slider, and will help avoid landing on a "range" like 10-10.
(I think radix has a similar prop)

<Slider.Root value={[10, 20]} step={1} minStepsBetweenValues={1} />