html - Recreating the HTML5 range input for Mobile Safari (webkit)?

Question

So I've been working on a HTML5 iPad application for work and have come across a problem. I didn't have access to an iPad whilst first working on this app and relied on desktop Safari to get my app quickly together (probably not the best thing, anyhow...)

I'm having to rely on a input range for a part of the interface. After seeing that HTML5 had a range input, I was happy as this is just what I needed. I even managed to style it up to exactly what was designed:

This is great! ...until I actually tried it on an iPad and it doesn't work. Just shows a text input. I'm now wondering what to do... I do need a slider, something that when dragged, it spits out the data. Obviously needs to work with touch. After looking around all over the web, there doesn't seem to be a solid solution.

What do you guys suggest here? What's the proper way of coding up a working touch-friendly slider, just like the native HTML5 one that it doesn't support!?

Any ideas/thoughts/knowledge/experience would be greatly appreciated! James

Answer 1

I tested all the proposed "solutions" and found them all lacking.
All are excessively bloated, some change your existing markup or force unnecessary CSS styles.

So I crafted my own solution in 2kb of JavaScript (minified).

Try it (on your mobile device): https://range-touch.herokuapp.com

Code: https://github.com/dwyl/range-touch (concise and commented)

To get this working in your own project all you need to do is include the
range-touch.min.js file in your page/template.

Magically <input type="range"> works on all mobile devices.

You can style the slider & button how ever you like.
I've included sample styles in the optional/style.css

Note: this solution Assumes you have JQuery or Zepto.js