Lets you use HTML5 range input on touch devices
(iPhone, iPad & Android) with a single 2kb JS file (no bloatware)!
- Let touch devices interact with the <input type="range"> element
- Do not force people to use any extra styles or script.
- Do not modify markup on the page (other scripts do wierd things!)
- Degrade gracefully for people with JavaScript disabled (desktop only)
- Works with JQuery [96kb] or Zepto [26kb]
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