Skip to content

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

@peterjcole

Description

@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.

CleanShot 2022-08-08 at 14 47 20

🤔 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

  • 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)

Activity

reidbarber

reidbarber commented on Aug 8, 2022

@reidbarber
Member

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

peterjcole commented on Aug 9, 2022

@peterjcole
Author

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

reidbarber commented on Aug 9, 2022

@reidbarber
Member

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

peterjcole

peterjcole commented on Aug 9, 2022

@peterjcole
Author

Makes sense. Thanks!

moved this from To Groom to Waiting for Sprint in RSP Component Milestoneson Aug 10, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status

    📋 Waiting for Sprint

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @reidbarber@LFDanLu@peterjcole

        Issue actions

          react-aria: useSlider multi-thumb example, thumbs no longer draggable after both thumbs set to 100% · Issue #3387 · adobe/react-spectrum