sanchit94 / range-touch

:iphone: Use HTML5 range input on touch devices (iPhone, iPad & Android) without bloatware!

range-touch

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

Try it: https://range-touch.herokuapp.com

Requirements

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]

Results

iPhone (Safari Mobile iOS 7)

Android (Samsung Galaxy S3 - Default Browser 4.2)

iPad (Safari Mobile iOS 7)

---

Background

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.

Why Not Use JQuery UI...?

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+!

Research

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!

Alternatives

• 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/

Bibliography

• 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