Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix dragging the slider on iOS #139

Open
wants to merge 1 commit into
base: master
from

Conversation

@amannn
Copy link

commented Oct 10, 2018

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.

Broken demo (maybe you have to download the video to be able to watch it).

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: Working demo

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

@HermanMartinus

This comment has been minimized.

Copy link

commented Oct 15, 2018

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

@amannn

This comment has been minimized.

Copy link
Author

commented Oct 17, 2018

Ping @davidchin 馃檪

@acomito

This comment has been minimized.

Copy link

commented Oct 17, 2018

I need this too!

@symn

This comment has been minimized.

Copy link

commented Oct 18, 2018

Thx for fixing!

@acomito

This comment has been minimized.

Copy link

commented Oct 26, 2018

馃憦 please merge @davidchin

@amannn

This comment has been minimized.

Copy link
Author

commented Oct 30, 2018

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

@acomito

This comment has been minimized.

Copy link

commented Oct 30, 2018

@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

This comment has been minimized.

Copy link
Author

commented Oct 30, 2018

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

This comment has been minimized.

Copy link

commented Feb 14, 2019

Thanks for the fix!

@davidchin could you merge this PR?

@amannn

This comment has been minimized.

Copy link
Author

commented Jul 9, 2019

Ping @davidchin

@amannn

This comment has been minimized.

Copy link
Author

commented Sep 27, 2019

Hey @davidchin, sorry for bothering you again. Would be really helpful if you could have a loot at this / merge it, as other people seem to experience the issue as well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can鈥檛 perform that action at this time.