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

[peterjcole]

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)

[reidbarber]

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:

let zIndex = state.getThumbPercent(index === 1 ? 0 : 1) === (index === 1 ? 0 : 1) ? 2 : undefined;

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]

Thanks for the workaround code example @reidbarber! Working great for preventing the thumbs getting stuck at 100%.

I simplified it a bit to:

const zIndex = index === 0 && state.getThumbPercent(1) === 1 ? 2 : undefined

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]

@peterjcole that works too, I just made it work the same for both to be a bit safer.

[peterjcole]

Makes sense. Thanks!