by sampotts

sampotts / rangetouch

A super tiny library to make `<input type='range'>` sliders work better on touch devices

214 Stars 30 Forks Last release: 8 months ago (v2.0.1) MIT License 71 Commits 17 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:


A super tiny library to make

 sliders work better on touch devices.

Donate - Demo - npm version

Why bother?

While building the Plyr media player I noticed how bad the experience was trying to use

 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.


  • ~1KB minified and gzipped
  • No dependencies (written in "vanilla" JavaScript)
  • Uses event delgation so no need to re-run after DOM manipulation

Quick setup

1. Include the lib

Either use the ES6 module:

import RangeTouch from 'rangetouch';

...or include the script:

2. Create instance(s)

Single instance

const range = new RangeTouch('input[type="range"]', { ...options });

The first argument can either be:

The second argument is for options.

This will return a reference to the single instance.

Multiple instances

To setup multiple inputs at one time, you can use the following static method:

const ranges = RangeTouch.setup('input[type="range"]', { ...options });

The first argument can either be:

The second argument is for options.

This will return an array of RangeTouch instances that it setup.


| Property | Type | Default | Description | | ---------- | ------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | addCSS | Boolean |

| Whether to inject CSS to improve the usability of the inputs. It's recommended you add this yourself if you don't want RangeTouch to take care of it. | | thumbWidth | Integer |
| This value is used as part of the calculation to determine the value the users selects when touching the range track. Unfortunately as JavaScript can't access the shadow DOM, this value can't be automatically determined. I would recommend customisation (and setting the size of the thumb) given all OS and browser combinations seem to render the control differently. | | watch | Boolean |
| Watch for new elements added to the DOM that match your string selector. Note: This only applies when using the multiple instance
setup method and also requires a string selector as the first argument. |


| Method | Arguments | Description | | --------- | --------- | -------------------------------------------------------- | | destroy() | N/A | Destroy the current instance and remove event listeners. |

To call an API method, you need a reference to the instance. For example:

const range = new RangeTouch('input[type="range"]', { ...options });


If you find anything weird with RangeTouch, please let us know using the GitHub issues tracker and be descriptive on how to reproduce, expected result, the browser (and version) used, etc.


RangeTouch is developed by @sam_potts / sampotts.me


RangeTouch costs money to run for domains, hosting and more. Any help is appreciated... Donate to support RangeTouch



Thanks to Fastly for providing the CDN services.

Copyright and License

The MIT license.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.