Gathering detailed insights and metrics for rangetouch
Gathering detailed insights and metrics for rangetouch
Gathering detailed insights and metrics for rangetouch
Gathering detailed insights and metrics for rangetouch
A super tiny library to make `<input type='range'>` sliders work better on touch devices
npm install rangetouch
Typescript
Module System
Node Version
NPM Version
JavaScript (100%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
252 Stars
71 Commits
36 Forks
12 Watchers
17 Branches
5 Contributors
Updated on Apr 20, 2025
Latest Version
2.0.1
Package Id
rangetouch@2.0.1
Size
32.56 kB
NPM Version
6.13.7
Node Version
13.8.0
Published on
Mar 02, 2020
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
38
A super tiny library to make <input type="range">
sliders work better on touch devices.
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.
Either use the ES6 module:
1import RangeTouch from 'rangetouch';
...or include the script:
1<script src="https://rangetouch.com/2.0.1/rangetouch.js"></script>
1const 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.
To setup multiple inputs at one time, you can use the following static method:
1const 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:
1const range = new RangeTouch('input[type="range"]', { ...options }); 2range.destroy();
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.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 4/26 approved changesets -- score normalized to 1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
Reason
security policy file not detected
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
63 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More