2.0.1 • Public • Published


    A super tiny library to make <input type="range"> 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 <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.


    • ~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:

    <script src="https://rangetouch.com/2.0.1/rangetouch.js"></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 true 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 15 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 true Watch for new elements added to the DOM that match your string selector. Note: This only applies when using the multiple instance RangeTouch 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.


    npm i rangetouch

    DownloadsWeekly Downloads






    Unpacked Size

    132 kB

    Total Files


    Last publish


    • sam_potts