移动设备上的范围输入滑块

Question

I'm using the default html5 input range object for a custom audio player. Everything works fine, all the events get fired when I need them and stuff, except I have on annoying issue on my mobile Safari with iOS 11.4:

When I tap on the seekbar/slider, the 'thumb' doesn't jump to the tapped position. I noticed that is the case with any input slider object that I test on my device.

Changing the thumb position by dragging it with onTouchStart/onTouchEnd works fine however.

Anyone who can help me with this problem?

Thanks!

Answer 1

It looks like a solution may be posted in this SO post .

I have exactly the same problem, only with an iPhone.

This is because Mobile Safari only supports a subset of HTML5. I am using JqTouch which is causing me all manner of issues so do avoid this framework.

Take a look at jquery mobile. Its currently Alpha 3, but has a slider control which works on iOS.

Hope this helps you a little.

And another answer suggests using the range-touch library, but assumes you have JQuery for this.