Lets you use HTML5 range input on touch devices
(iPhone, iPad & Android) with a single 2kb JS file (no bloatware)!

1. Let touch devices interact with the <input type="range"> element
2. Do not force people to use any extra styles or script.
3. Do not modify markup on the page (other scripts do wierd things!)
4. Degrade gracefully for people with JavaScript disabled (desktop only)
5. Works with JQuery [96kb] or Zepto [26kb]

"range-touch iPhone"

"range-touch Android"

"range-touch iPad"

Today I had to add a range ("slider") to our (HTML5) iPad App.
Unfortunately, at the time of writing, Mobile Safari does not support (touch/drag) <input type="range"> ... so I had to search.

A (non-technical) person in the office asked (in patronizing tone):

"Why don't you just use Jquery UI Slider...?" http://jqueryui.com/slider/

Our project does not include JQuery UI I was reluctant to add it just for the slider feature.
jquery-ui-1.10.3.js is 436kb!! Even the minified version jquery-ui.min.js is a whopping 228kb and you also need the CSS file (another 32kb): jquery-ui.css (So unless you need several of Jquery UI's features, loading 260kb on a mobile device is going to be painfully slow!)

I tried building a custom JQuery UI script with just the bare essentials:
http://jqueryui.com/download/ but this was still 140kb+!

My first search for a solution took me to StackOverflow:

• http://stackoverflow.com/questions/5484540/recreating-the-html5-range-input-for-mobile-safari-webkit
• http://stackoverflow.com/questions/16732569/zepto-js-tap-event-doesnt-fire
• http://stackoverflow.com/questions/3556157/how-to-customize-the-html5-input-range-type-looks-using-css
• http://stackoverflow.com/questions/5165287/how-to-achive-background-color-in-html5-inputtype-range

But none of the answers solved the problem satisfactorily. All of them require a CSS file which overrides styles we have in our project! We need a lightweight solution that only adds touch support and no styles!

• JQuery Mobile: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/sliders/ + http://jquerymobile.com/download-builder/ [still huge!]
• TouchPunch [Requires JQuery UI!!]: http://touchpunch.furf.com/ + https://github.com/furf/jquery-ui-touch-punch
• fd-slider [bloated!] https://github.com/freqdec/fd-slider
• noUiSlider [38kb]: http://refreshless.com/nouislider/ + https://github.com/leongersen/noUiSlider
• Jquery Tools: https://github.com/jquerytools/jquerytools
• Range Polyfill: https://github.com/jonstipe/range-polyfill
• Modernizr: https://github.com/Modernizr/Modernizr/

• Intro to <input type="range">: http://www.html5tutorial.info/html5-range.php
• Quirksmode Confirms Not Currently Supported in Safari Mobile: http://www.quirksmode.org/html5/inputs_mobile.html
• http://www.developerdrive.com/2013/09/how-to-style-range-sliders-in-webkit/
• http://fusiongrokker.com/post/using-the-zepto-js-touch-events-plugin-for-more-responsive-phonegap-apps-without-zepto
• http://stackoverflow.com/questions/18389224/how-to-style-html5-range-input-to-have-different-color-before-and-after-slider