Recreating the HTML5 range input for Mobile Safari (webkit)?
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