[Slider] Allow disabling the left and right thumbs swap

[SunShinewyf]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

the bar on the left cannot exceed the bar on the right, hope that there is an api to control it

Examples 🌈

Motivation 🔦

[SunShinewyf]

I hope that the left and right bars cannot overlap and the direction cannot be interchanged, but there is no api can do this, please help to add an api to control this, hope to get your reply as soon as possible, thanks~

[oliviertassinari]

@SunShinewyf Could you provide more details on your use case? Why do you need this behavior?

[oliviertassinari]

@remyoudemans Do you have a visual example? It would help

[remyoudemans]

Reading this again, I think @SunShinewyf's issue is totally unrelated to mine.
Where @SunShinewyf wanted a range slider where the thumbs couldn't pass each other, I was just talking about a slider where the sides of the thumb can't stick out past the edges of the rail.

Sorry for the confusion!

[oliviertassinari]

Alright, I'm closing for now as thumbs passing each other, is in theory fine.

[SunShinewyf]

@SunShinewyf Could you provide more details on your use case? Why do you need this behavior?

I'm sorry to see your reply so late, my use case just like a slider in a video clip, when the left bar and the right bar are in the same position, they can't drag, I don't want that thumbs can pass each other, so I hope that there is an API to control this

[SunShinewyf]

Would like to ask whether the current version can meet such requirement? our projects are a little urgent

[oliviertassinari]

@SunShinewyf I have no idea. Did you look into how the Slider's source can be updated to support it? Maybe we could have a prop for it if the implementation is simple enough?

[SunShinewyf]

@oliviertassinari Not yet, let me look into it

[chaddoncooper]

+1 for this, my use case is also based on a time range. I also need a minimum value between the two.

[oliviertassinari]

I have tried to implement quickly the UX in https://codesandbox.io/s/rangeslider-material-demo-forked-63xq9?file=/demo.tsx by controlling the slider. I have found two blockers:

1. The active thumb swaps to the nearest to the active pointer. We could add a prop to disable this behavior.

2. The onChange callback doesn't give information about the current active thumb. With such information, it would have allowed the implementation of the shift pattern in both directions

So overall, it looks quite a simple problem to solve.

[anubhavb11]

how can i disable one of the thumb totally