How to make draggable area to be on the handle only?

[henrikra]

First of all this is very good library but I have one UX problem in mind.

Specially when using with mobile if you have list of different ReactCompareSliders which take full width of the mobile screen it is annoying to scroll list vertically because you accidentally start sliding the ReactCompareSlider even though you wanted to scroll content of the page vertically.

So would be nice to restrtict the area of ReactCompareSlider so that only if user drags the handle then it starts to drag ReactCompareSliders content horizontally. What do you guys think?

[nerdyman]

Hi @henrikra,

That's definitely a good idea. An additional prop could be added to make only the handle draggable, maybe something like onlyHandleDraggable? Then the event listeners could be moved to the handle instead of the container.

[henrikra]

Sounds good to me 👍

[nerdyman]

@henrikra This has been added in 1.2.0. The default handle doesn't work that well with this setting enabled because of its width. I'll be publishing v2 of this library in the coming weeks to fix this along with a few other features. In the meantime, you could use your own custom handle.

The library doesn't automatically detect touch devices but I've added docs on how to detect touch devices if you haven't already got something configured.

Thanks for opening the issue, if it's not working as you expected (with the caveat above for the default handle) feel free to reopen the issue.

[henrikra]

@nerdyman Thx! Now I have tested the new version and it works like a charm!