RangeTouch

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

Donate - Demo -

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.

Features

• ~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://cdn.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:

• a valid CSS selector
• an Element

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:

• a valid CSS selector
• an Element
• an NodeList
• an Element of Element

The second argument is for options.

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

Options

API

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

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

Issues

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.

Author

RangeTouch is developed by @sam_potts / sampotts.me

Donate

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

Thanks

Thanks to Fastly for providing the CDN services.

Copyright and License

The MIT license.