[slider] Support unsorted range sliders (thumb swapping)

[pccck]

Duplicates

• I have searched the existing issues

Summary 💡

The current range slider implementation sorts the values, which is great for the most typical use cases for range sliders, such as selecting a price range to search from etc.

We have an use case though where we want a range slider where users can select a "goal" and a current "status", and would like to implement it as a range slider where we customize the look of the Thumb components, an example could be look like this:

In the use case for these sliders, the status can be on either side of the goal.

Examples 🌈

Essentially this would mean that we'd add an optional boolean prop to the Slider component ("unsorted"?), when the value of this prop is true and the value is an array (= the slider is a range slider):

• the Thumb focus would not switch to the other Thumb when dragging over
• the value array given to the callbacks would not be sorted
• the index of the Thumbs would always match the order of the values in the array

Motivation 🔦

We've currently done this by maintaining a fork of the MUI Slider component where we've customized the functionality, but as we're now migrating to MUI 5 we'd be interested in doing a pull request to get this functionality in to the core library instead.

Would this be something that you feel would bring value? We could have a PR up with tests in a couple of days.

Search keywords:

[michaldudak]

Hi @pccck. I can see value in what you are proposing. If you're willing to implement it, go ahead.

[mj12albert]

Will try to tackle this in #373 !

[michaldudak]

@mj12albert, could you confirm #373 implements this as requested by the author?

[mj12albert]

We did not implement this and ended up dropping support for thumb swapping in the end, because it was not possible to make the component accessible without adding more complexity to the API

With the new composition API, the thumbs are always rendered in DOM order, and keyboard focus kind of breaks when the thumbs are ordered any other way

In my experimenting I found that to solve these issues the DOM elements must also be repositioned as necessary which would either or both:

1. Manually requiring an index prop
2. Allow the Track to accept a function as a child and provide the value(s) in render props that can be freely sorted and rendered

In the end the team decided we didn’t want to do either of those to the Slider API but will consider a new component instead.

Coming back to this issue now I think this is quite close to what it would take to implement thumb swapping/custom sorting properly: https://docs.dndkit.com/presets/sortable 🧐

[colmtuite]

Duplicate of #1220