Fix dragging the slider on iOS

[amannn]

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.

react-input-range-ios.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:

react-input-range-fixed.mov

Would be great if we could get this merged and released in the near future 🙂

[HermanMartinus]

I've been having this problem for a while and this fix LGTM 👍

[amannn]

Ping @davidchin 🙂

[acomito]

I need this too!

[symn]

Thx for fixing!

[acomito]

👏 please merge @davidchin

[amannn]

I've published a fork in the meantime in case someone needs an urgent fix: react-input-range-ios-fix

[acomito]

@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

[amannn]

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.

[AlexRage]

Thanks for the fix!

@davidchin could you merge this PR?

[amannn]

Ping @davidchin

[amannn]

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.