react-input-range
react-input-range copied to clipboard
davidchin
Fix dragging the slider on iOS
In Safari on iOS I noticed that dragging the slider doesn't work, if the finger is moved along the track. This doesn't practically happen in your demos, as the track is very tiny, but if you increase the size for better touch support, you'll see this issue. Another issue is, that while dragging the slider, the page will scroll with the finger.
https://user-images.githubusercontent.com/4038316/152819467-06f30a71-61c9-4e57-99a7-bf64c7f80455.mov
A call to preventDefault() in the touchstart handler fixes this issue. However, React attaches the event handler as passive and currently doesn't offer an API for opting into active mode. Therefore we need to handle the handler registration ourselves.
Now everything works as expected:
https://user-images.githubusercontent.com/4038316/152819564-d6e69fb2-0ff7-4112-9346-f4369a5a61a1.mov
Would be great if we could get this merged and released in the near future 🙂
I've published a fork in the meantime in case someone needs an urgent fix: react-input-range-ios-fix
@amannn Thanks for this. Just gave your package a try. I still seem to be missing dragging on my iphone 8+
UPDATE: I thought this fix was for for dragging the entire track (i.e. draggableTrack=true). I didn't realize you meant dragging the min/max handles. It seems draggableTrack isn't possible in iOS
Ah, yes that's correct. I've seen that the component has a draggableTrack config option, but I've personally never used that so I can't really tell how that works – sorry.
Hey @davidchin, sorry for bothering you again. Would be really helpful if you could have a look at this / merge it, as other people seem to experience the issue as well.