rangetouch

What is rangetouch?

The rangetouch npm package is designed to enhance the usability of HTML range inputs on touch devices. It provides a more intuitive and responsive experience for users interacting with sliders and other range-based inputs on touchscreens.

What are rangetouch's main functionalities?

Initialize RangeTouch

This feature initializes RangeTouch on specified range inputs. By calling `RangeTouch.set` with a selector, you can enhance the touch experience for those elements.

const RangeTouch = require('rangetouch');
RangeTouch.set('.range-input');

Custom Configuration

This feature allows you to customize the behavior of RangeTouch. For example, you can set the `thumbWidth` to adjust the width of the slider thumb, making it easier to interact with on touch devices.

const RangeTouch = require('rangetouch');
RangeTouch.set('.range-input', { thumbWidth: 20 });

Destroy RangeTouch

This feature allows you to remove the RangeTouch enhancements from specified range inputs. By calling `RangeTouch.destroy` with a selector, you can revert the elements back to their original behavior.

const RangeTouch = require('rangetouch');
RangeTouch.destroy('.range-input');

Other packages similar to rangetouch

ion-rangeslider

ion-rangeslider is a powerful and flexible range slider plugin that supports both touch and mouse interactions. It offers a variety of features such as custom skins, grid support, and additional callbacks for handling slider events. While RangeTouch focuses on enhancing native range inputs, ion-rangeslider provides a more feature-rich and customizable slider solution.

rangeslider.js

rangeslider.js is a simple, lightweight jQuery plugin for enhancing range inputs. It provides basic touch support and allows for easy customization of the slider's appearance. Compared to RangeTouch, rangeslider.js is more focused on providing a straightforward enhancement to range inputs without extensive configuration options.

README

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://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

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.

API

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 });
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.