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).

Screenshot on iOS Device
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