search

zillow / react-slider

Accessible, CSS agnostic, slider component for React.
https://zillow.github.io/react-slider
MIT License
891 stars 232 forks source link

Touch on mobile does not prevent vertical scroll #171

Closed viters closed 4 years ago

viters commented 4 years ago

Hey,

First I want to express my gratefulness. It's awesome to see a maintained range slider repository. And I love it being CSS-agnostic.

The one issue I noticed is that touching a slider thumb does not disable vertical scrolling. It makes using horizontal slider on mobile unfriendly and vertical one - impossible.

Tested on Android Firefox, Android Chrome and iOS Safari.

I may try to come up with PR.

stonebk commented 4 years ago

I thought scrolling was accounted for with respect to touch events 🤔

Appears not, after a quick test on my phone. I would be happy to review a PR!

viters commented 4 years ago

I've researched it yesterday and there is a simple solution, adding touch-action: none to thumb will prevent scrolling on touch. I would not suggest setting it to whole slider, because it would be UX unfriendly - accidental slider touch to scroll page is a possible situation. It has a nice browser support. This solution also takes care of situation, when slider is inside scrollable container.

Although it is not an ultimate solution - it does not cover older iOS devices which did not get update to iOS 13. I have researched this issue, and to be honest I see no solution for places where touch-action: none is not supported. The problem is that in this slider's case you have to block scroll only after someone did touch thumb - so touchstart already did happen. Old way to block scroll was to add listener to touchmove and prevent it's default behavior - but it is blocked by browser if scrolling has already started (so in touchstart handler). I have iPhone 6 with iOS 12 and all stuff I had tried did not work (even https://github.com/willmcpo/body-scroll-lock). Moreover, overflow: hidden on Safari also does not prevent scrolling (https://bugs.webkit.org/show_bug.cgi?id=153852), so it's not a valid workaround.

stonebk commented 4 years ago

react-slider@1.0.6