You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<Slider> does not allow thumbs to cross each other. This makes it impossible to implement our own validation logic when collisions occur. I would like a way to implement custom validation logic for multi-thumb values.
🤔 Expected Behavior?
I expect that my onChange handler will be responsible for validating values, and will not be limited by built-in logic beyond the constraints specified by minValue / maxValue / step
😯 Current Behavior
Sliders enforce that thumb values cannot exceed neighboring values. This ensures that values are ordered, but prohibits custom UX for collisions.
Perhaps an additional prop like disableCollision could disable the constraint on neighboring values
🔦 Context
I have two slider thumbs "left" and "right" that define a range, when I drag the left thumb beyond the right thumb I want the left thumb to pull the right thumb along with it. This makes it easier for a user to move the left thumb to a desired value in one movement instead of having to manually shuffle the right value along.
Instead, the "left" thumb halts at the "right" value. If thumbs did not come with prescribed collision logic, I could implement the constraint myself. However, since the right thumb prohibits the left thumb from moving past it, there is no way for me to detect when the user intends to drag further.
💻 Examples
No response
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
The text was updated successfully, but these errors were encountered:
Provide a general summary of the feature here
<Slider>
does not allow thumbs to cross each other. This makes it impossible to implement our own validation logic when collisions occur. I would like a way to implement custom validation logic for multi-thumb values.🤔 Expected Behavior?
I expect that my
onChange
handler will be responsible for validating values, and will not be limited by built-in logic beyond the constraints specified byminValue
/maxValue
/step
😯 Current Behavior
Sliders enforce that thumb values cannot exceed neighboring values. This ensures that values are ordered, but prohibits custom UX for collisions.
react-spectrum/packages/@react-stately/slider/src/useSliderState.ts
Lines 216 to 221 in cf0846e
💁 Possible Solution
Perhaps an additional prop like
disableCollision
could disable the constraint on neighboring values🔦 Context
I have two slider thumbs "left" and "right" that define a range, when I drag the left thumb beyond the right thumb I want the left thumb to pull the right thumb along with it. This makes it easier for a user to move the left thumb to a desired value in one movement instead of having to manually shuffle the right value along.
Instead, the "left" thumb halts at the "right" value. If thumbs did not come with prescribed collision logic, I could implement the constraint myself. However, since the right thumb prohibits the left thumb from moving past it, there is no way for me to detect when the user intends to drag further.
💻 Examples
No response
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
The text was updated successfully, but these errors were encountered: