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

License: MIT

This code is licensed under MIT see: https://opensource.org/licenses/MIT

Copyright (c) 2013 - 2016 dwyl.io

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.