A super tiny library to make
<input type="range"> sliders work better on touch devices.
While building plyr I noticed how bad the experience was trying to use
<input type="range"> is on a touch device (particularly iOS). Touching the track on a desktop will jump the thumb handle to that point. However on some touch devices this simply focuses the input and to adjust the value you need to touch and drag the handle. This is something that I can't help but feel will eventually be fixed by the browser vendors but for now, you can use RangeTouch to fill that gap.
- No setup required, just include the script
- Less than 1KB minified and gzipped
To use RangeTouch, you just need to add
rangetouch.js (either from the
/dist (minified) or
/src/js (unminified) folders). Ideally before the closing
<script src="/path/to/rangetouch.js" async></script>
It will automatically bind to all
<input type="range"> elements, even newly injected ones as it uses event delegation.
You can load RangeTouch from our CDN (backed by the awesome Fastly) if you'd like:
Node / NPM
npm install rangetouch
bower install rangetouch
More info on setting up dependencies can be found in the Bower Docs
If you're customizing your range inputs (easily done - see the demo for an example) and you change the size of the thumb handle, you should specify (in pixels) this after including the script:
If you want to disable RangeTouch for a particular input, add the
rangetouch--disabled class name to the element.
If you find anything weird with RangeTouch, please let us know using the GitHub issues tracker.
RangeTouch costs money to run, not my time - I donate that for free but domains, hosting and more. Any help is appreciated... Donate to support RangeTouch
Thanks to Fastly for providing the CDN services.