react-aria: useSlider multi-thumb example, thumbs no longer draggable after both thumbs set to 100%
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
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)
Contributor guide
Research direction
Start with the react-aria useSlider “Multi thumb” example and reproduce the case where both thumbs reach 100%, then review the related Spectrum RangeSlider logic that the issue says should move into hooks. Done means the chosen behavior for coincident thumbs is implemented and users can recover by dragging in the intended direction rather than needing to click the track.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100