adobe / adobe/react-spectrum

react-aria: useSlider multi-thumb example, thumbs no longer draggable after both thumbs set to 100%

Open
#3,387 5 comments 1 reaction 0 assignees View on GitHub
has workaround Slider
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.

![CleanShot 2022-08-08 at 14 47 20](https://user-images.githubusercontent.com/11048765/183433256-41294139-5b2e-43f8-9256-a318b960ff12.gif)

## 🤔 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:

![CleanShot 2022-08-08 at 14 59 23](https://user-images.githubusercontent.com/11048765/183435779-4919f2eb-efb0-4133-a129-c96c97b83a92.gif)

- 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.