primitives
primitives copied to clipboard
radix-ui
Slider ability to disable swap of multiple thumbs
Feature request
Overview
When using the slider with multiple thumbs, the thumbs are allowed to swap the thumbs when crossing over. See in the example how the min and max value of the slider swaps.
Our users find this an inconvenient feature. They usually set the min or max value of the slider and would not want the opposite thumb to be able to cross this boundary.
Having a property to disable swap on the Radix slider would help us.
Examples in other libraries
I believe this is possible in MUI with disableSwap
Who does this impact? Who is this for?
Like minStepsBetweenThumbs feature, adding a flag to enable this feature would allow the user to determine if this is useful for their application or not.
Additional context
As the values are sorted on change inside of Radix, it is not possible to build this feature outside of Radix context.
The feature in my eyes would be adding a disableSwap property to the Slider primitive. When enabled and the values are not sorted (so min is above max, or max is below min value) the next value shouldn't be set.
The fact that the values switch when thumbs switch is a pretty big problem. It makes preventing the thumbs from crossing over really hard to implement manualy. Something like the mentioned disableSwap property would be really helpful.
I'd like this feature also, the default behaviour doesn't feel expected to me.
I think this could be considered a bug. I can't think of a scenario where I would want the actual behaviour.
I think a related issue is that when I "mousedown" on a thumb and then move my cursor onto a different element (e.g. an unrelated button) and release "mouseup", I click on that element.
The automatic reordering of value makes it pretty much impossible to reliably control the value of a specific thumb.
For instance if you have three thumbs, there's no way to lock the middle thumb between the range of the outer two—instead, the middle thumb will "become" the outer thumb once it exceeds the threshold.
React Aria uses an index prop on the slider thumb to specify a thumb's ordering in the value array
https://react-spectrum.adobe.com/react-aria/Slider.html#sliderthumb
This is most definitely a bug. According to the Slider documentation, it is stated that...
Adheres to the Slider WAI-ARIA design pattern.
And from that specification, it states...
In many two-thumb sliders, the thumbs are not allowed to pass one another, such as when the slider sets the minimum and maximum values for a range. For example, in a price range selector, the maximum value of the thumb that sets the lower end of the range is limited by the current value of the thumb that sets the upper end of the range. Conversely, the minimum value of the upper end thumb is limited by the current value of the lower end thumb. However, in some multi-thumb sliders, each thumb sets a value that does not depend on the other thumb values.
This reads as if the Slider primitive should support both cases: the thumbs being limited by each other and the thumbs being able to freely pass each other. As it is currently, it does not, so it actually does not adhere to the WAI-ARIA specification.
I would implore the priority of this issue be set to the highest value because of this and a fix prioritized.
