-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Description
Action Items:
- move logic that Spectrum RangeSlider has into hooks
🐛 Bug Report
In the 'Multi thumb' example usage for useSlider
: https://react-spectrum.adobe.com/react-aria/useSlider.html#multi-thumb, setting both thumbs to 100% means that thumbs can no longer be dragged. The only way to recover from this is to click on the track instead of the thumb.
The rightmost thumb is always on top, so when the thumbs are both set to the same value, it's only possible to drag a thumb to the right.
🤔 Expected Behavior
- Ideally the user should be able to drag a thumb to the left in this scenario. Should the most recently clicked thumb always be on top?
- Even when not both set to 100%, it's possibly confusing that if you drop the left thumb on top of the right, you can only then drag out to the right, as in gif below:
- Alternatively could perhaps add validation to the example to prevent both thumbs to be set to 100%
- Perhaps if not resolved, this limitation could be mentioned in the docs so people can be aware of it while choosing how to implement their slider?
😯 Current Behavior
- The thumbs can no longer be dragged
💁 Possible Solution
🔦 Context
I'm using the hook to develop a multi thumb slider for a production app, and hadn't noticed this issue until quite late in development, and I think it's going to be a fairly big problem that I'll need to figure out how to solve. I think users wouldn't expect this behaviour and wouldn't necessarily be able to figure out to click the track to recover from it.
💻 Code Sample
🌍 Your Environment
Software | Version(s) |
---|---|
react-aria | 3.18.0 |
Browser | Chrome 103 |
Operating System | Mac OS |
🧢 Your Company/Team
🕷 Tracking Issue (optional)
Metadata
Metadata
Assignees
Labels
Type
Projects
Status
Activity
reidbarber commentedon Aug 8, 2022
For a temporary workaround, you may want to add some logic that increases the z-index left thumb up when the right thumb is at the max value (and vice versa). Here's an example. You can basically use:
Seems like something we should definitely handle. One option is what you mentioned, having the most recently dragged thumb on top. Or we could look at implementing the workaround I mentioned above in the hook. At the least, we could mention this case in the docs.
peterjcole commentedon Aug 9, 2022
Thanks for the workaround code example @reidbarber! Working great for preventing the thumbs getting stuck at 100%.
I simplified it a bit to:
I don't think the right thumb z-index needs adjusting when the left thumb is at 0, since the right one is always on top anyway, unless I missed something?
reidbarber commentedon Aug 9, 2022
@peterjcole that works too, I just made it work the same for both to be a bit safer.
peterjcole commentedon Aug 9, 2022
Makes sense. Thanks!