Socket
Socket
Sign inDemoInstall

rangetouch

Package Overview
Dependencies
0
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.0.5 to 1.0.6

.editorconfig

55

changelog.md
# Changelog
## v1.0.6
- Fixed issue with stylesheet re-use
## v1.0.5
- Fixed issue with variable naming
- Fixed issue with variable naming
## v1.0.4
- Fixed bug introduced in v1.0.3 with selector for disabled elements
- No long require the upfront check for elements on the page given we just listen to events
- Fixed bug introduced in v1.0.3 with selector for disabled elements
- No long require the upfront check for elements on the page given we just listen to events
## v1.0.3
- Fixed error if no `<input type="range">` found
- CustomEvent polyfill no longer effects the global scope
- AddCSS option to set whether to add helpful CSS to the page
- Fixed error if no `<input type="range">` found
- CustomEvent polyfill no longer effects the global scope
- AddCSS option to set whether to add helpful CSS to the page
## v1.0.2
- More clean up
- More clean up
## v1.0.1
- Clean up
- Clean up
## v1.0.0
- Repo move and release
- Repo move and release
## v0.0.9
- Added disabled selector
- Added disabled selector
## v0.0.8
- Bug fix for zoomed input
- Bug fix for zoomed input
## v0.0.7
- Triggering `input` and `change` events
- Triggering `input` and `change` events
## v0.0.6
- Bug fix for min attrubute
- Bug fix for min attrubute
## v0.0.5
- Bug fix for breaking other touches
- Bug fix for breaking other touches
## v0.0.4
- Bug fix for thumb width offset
- Bug fix for thumb width offset
## v0.0.3
- Microsoft Edge fixes and improvements to touch area
- Microsoft Edge fixes and improvements to touch area
## v0.0.2
- Version bump for bower
- Version bump for bower
## v0.0.1
- Initial release
- Initial release

@@ -1,1 +0,1 @@

!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=t(e,document):"function"==typeof define&&define.amd?define(null,function(){t(e,document)}):e.rangetouch=t(e,document)}("undefined"!=typeof window?window:this,function(e,t){"use strict";function n(){u(t.body,f.events.start,l),u(t.body,f.events.move,l),u(t.body,f.events.end,l)}function o(){var e=t.createElement("style");return e.appendChild(t.createTextNode("")),t.head.appendChild(e),e.sheet}function a(n,o,a){if(n&&o){var r;"function"==typeof e.CustomEvent?r=e.CustomEvent:(r=function(e,n){n=n||{bubbles:!1,cancelable:!1,detail:void 0};var o=t.createEvent("CustomEvent");return o.initCustomEvent(e,n.bubbles,n.cancelable,n.detail),o},r.prototype=e.Event.prototype);var i=new r(o,{bubbles:!0,detail:a});n.dispatchEvent(i)}}function r(){return[f.selectors.range,":not(",f.selectors.disabled,")"].join("")}function i(e){return!(e instanceof HTMLElement)||(e.matches(f.selectors.disabled)||e.disabled)}function u(e,t,n){e.addEventListener(t,n,!1)}function d(e){var t=(""+e).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);return t?Math.max(0,(t[1]?t[1].length:0)-(t[2]?+t[2]:0)):0}function c(e,t){if(t<1){var n=d(t);return parseFloat(e.toFixed(n))}return Math.round(e/t)*t}function s(e){var t,n=e.target,o=e.changedTouches[0],a=parseFloat(n.getAttribute("min"))||0,r=parseFloat(n.getAttribute("max"))||100,i=parseFloat(n.getAttribute("step"))||1,u=r-a,d=n.getBoundingClientRect(),s=100/d.width*(f.thumbWidth/2)/100;return t=100/d.width*(o.clientX-d.left),t<0?t=0:t>100&&(t=100),t<50?t-=(100-2*t)*s:t>50&&(t+=2*(t-50)*s),a+c(u*(t/100),i)}function l(e){f.enabled&&"range"===e.target.type&&!i(e.target)&&(e.preventDefault(),e.target.value=s(e),a(e.target,e.type===f.events.end?"change":"input"))}var f={enabled:!0,addCSS:!0,thumbWidth:15,selectors:{range:'[type="range"]',disabled:".rangetouch--disabled"},events:{start:"touchstart",move:"touchmove",end:"touchend"}};return function(){if("ontouchstart"in t.documentElement){if(f.addCSS){var e=t.styleSheets;(e.length?e[0]:o()).insertRule(r()+" { user-select: none; -webkit-user-select: none; touch-action: manipulation; }",0)}n()}}(),{set:function(e,t){f[e]=t}}});
!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=t(e,document):"function"==typeof define&&define.amd?define(null,function(){t(e,document)}):e.rangetouch=t(e,document)}("undefined"!=typeof window?window:this,function(e,t){"use strict";var n={enabled:!0,addCSS:!0,thumbWidth:15,selectors:{range:'[type="range"]',disabled:".rangetouch--disabled"},events:{start:"touchstart",move:"touchmove",end:"touchend"}};function o(e,t,n){e.addEventListener(t,n,!1)}function a(e,t){if(t<1){var n=(o=(""+t).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/))?Math.max(0,(o[1]?o[1].length:0)-(o[2]?+o[2]:0)):0;return parseFloat(e.toFixed(n))}var o;return Math.round(e/t)*t}function d(o){var d;n.enabled&&"range"===o.target.type&&((d=o.target)instanceof HTMLElement&&!d.matches(n.selectors.disabled)&&!d.disabled)&&(o.preventDefault(),o.target.value=function(e){var t,o=e.target,d=e.changedTouches[0],i=parseFloat(o.getAttribute("min"))||0,r=parseFloat(o.getAttribute("max"))||100,u=parseFloat(o.getAttribute("step"))||1,s=r-i,c=o.getBoundingClientRect(),l=100/c.width*(n.thumbWidth/2)/100;return(t=100/c.width*(d.clientX-c.left))<0?t=0:t>100&&(t=100),t<50?t-=(100-2*t)*l:t>50&&(t+=2*(t-50)*l),i+a(s*(t/100),u)}(o),function(n,o,a){if(n&&o){var d;"function"==typeof e.CustomEvent?d=e.CustomEvent:(d=function(e,n){n=n||{bubbles:!1,cancelable:!1,detail:void 0};var o=t.createEvent("CustomEvent");return o.initCustomEvent(e,n.bubbles,n.cancelable,n.detail),o}).prototype=e.Event.prototype;var i=new d(o,{bubbles:!0,detail:a});n.dispatchEvent(i)}}(o.target,o.type===n.events.end?"change":"input"))}return function(){if("ontouchstart"in t.documentElement){var e;n.addCSS&&((e=t.createElement("style")).appendChild(t.createTextNode("")),t.head.appendChild(e),e.sheet).insertRule([n.selectors.range,":not(",n.selectors.disabled,")"].join("")+" { user-select: none; -webkit-user-select: none; touch-action: manipulation; }",0),o(t.body,n.events.start,d),o(t.body,n.events.move,d),o(t.body,n.events.end,d)}}(),{set:function(e,t){n[e]=t}}});

@@ -1,1 +0,1 @@

!function(){"use strict";function e(e){var n=new XMLHttpRequest,t=document.body;if("withCredentials"in n)n.open("GET",e,!0);else{if("function"!=typeof XDomainRequest)return;n=new XDomainRequest,n.open("GET",e)}n.onload=function(){var e=document.createElement("div");e.setAttribute("hidden",""),e.innerHTML=n.responseText,t.insertBefore(e,t.childNodes[0])},setTimeout(function(){n.send()},0)}window.loadSprites=function(n){n.forEach(e)},shr.setup({count:{classname:"btn__count"}}),window.rangetouch.set("thumbWidth",20),document.domain.indexOf("rangetouch.com")>-1&&(!function(e,n,t,o,i,c,a){e.GoogleAnalyticsObject=i,e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},e[i].l=1*new Date,c=n.createElement(t),a=n.getElementsByTagName(t)[0],c.async=1,c.src="//www.google-analytics.com/analytics.js",a.parentNode.insertBefore(c,a)}(window,document,"script",0,"ga"),ga("create","UA-40881672-15","auto"),ga("send","pageview"))}();
!function(){"use strict";function e(e){var n=new XMLHttpRequest,t=document.body;if("withCredentials"in n)n.open("GET",e,!0);else{if("function"!=typeof XDomainRequest)return;(n=new XDomainRequest).open("GET",e)}n.onload=function(){var e=document.createElement("div");e.setAttribute("hidden",""),e.innerHTML=n.responseText,t.insertBefore(e,t.childNodes[0])},setTimeout(function(){n.send()},0)}var n,t,o,a,i,c;window.loadSprites=function(n){n.forEach(e)},shr.setup({count:{classname:"btn__count"}}),window.rangetouch.set("thumbWidth",20),document.domain.indexOf("rangetouch.com")>-1&&(n=window,t=document,o="script",a="ga",n.GoogleAnalyticsObject=a,n.ga=n.ga||function(){(n.ga.q=n.ga.q||[]).push(arguments)},n.ga.l=1*new Date,i=t.createElement(o),c=t.getElementsByTagName(o)[0],i.async=1,i.src="//www.google-analytics.com/analytics.js",c.parentNode.insertBefore(i,c),ga("create","UA-40881672-15","auto"),ga("send","pageview"))}();
// ==========================================================================
// Gulp build script
// ==========================================================================
/*global require, __dirname, console*/
/*jshint -W079 */
var fs = require("fs");
var path = require("path");
var gulp = require("gulp");
var gutil = require("gulp-util");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var less = require("gulp-less");
var clean = require("gulp-clean-css");
var run = require("run-sequence");
var prefix = require("gulp-autoprefixer");
var svgstore = require("gulp-svgstore");
var svgmin = require("gulp-svgmin");
var rename = require("gulp-rename");
var s3 = require("gulp-s3");
var replace = require("gulp-replace");
var open = require("gulp-open");
var size = require("gulp-size");
const path = require('path');
const gulp = require('gulp');
const plumber = require('gulp-plumber');
const concat = require('gulp-concat');
const terser = require('gulp-terser');
const less = require('gulp-less');
const clean = require('gulp-clean-css');
const prefix = require('gulp-autoprefixer');
const svgstore = require('gulp-svgstore');
const svgmin = require('gulp-svgmin');
const rename = require('gulp-rename');
const replace = require('gulp-replace');
const open = require('gulp-open');
const size = require('gulp-size');
const aws = require('aws-sdk');
const publish = require('gulp-awspublish');
const log = require('fancy-log');
var root = __dirname;
var paths = {
const pkg = require('./package.json');
const bundles = require('./bundles.json');
const deploy = require('./deploy.json');
const { browserslist, version } = pkg;
// Get AWS config
Object.values(deploy).forEach(target => {
Object.assign(target, {
publisher: publish.create({
region: target.region,
params: {
Bucket: target.bucket,
},
credentials: new aws.SharedIniFileCredentials({ profile: 'rangetouch' }),
}),
});
});
const root = __dirname;
const paths = {
rangetouch: {
// Source paths
src: {
js: path.join(root, "src/js/**/*")
js: path.join(root, 'src/js/**/*'),
},
// Output paths
output: path.join(root, "dist/")
output: path.join(root, 'dist/'),
},

@@ -38,139 +55,128 @@ docs: {

src: {
less: path.join(root, "docs/src/less/**/*"),
js: path.join(root, "docs/src/js/**/*"),
sprite: path.join(root, "docs/src/sprite/**/*")
less: path.join(root, 'docs/src/less/**/*'),
js: path.join(root, 'docs/src/js/**/*'),
sprite: path.join(root, 'docs/src/sprite/**/*'),
},
// Output paths
output: path.join(root, "docs/dist/"),
output: path.join(root, 'docs/dist/'),
// Docs
root: path.join(root, "docs/")
root: path.join(root, 'docs/'),
},
upload: [path.join(root, "dist/**"), path.join(root, "docs/dist/**")]
upload: [path.join(root, 'dist/**'), path.join(root, 'docs/dist/**')],
};
// Task arrays
var tasks = {
const tasks = {
less: [],
sass: [],
js: [],
sprite: []
sprite: [],
};
// Fetch bundles from JSON
var bundles = loadJSON(path.join(root, "bundles.json"));
const build = {
js: (files, bundle) => {
Object.keys(files).forEach(key => {
const name = `js-${key}`;
tasks.js.push(name);
// Load json
function loadJSON(path) {
try {
return JSON.parse(fs.readFileSync(path));
} catch (err) {
return {};
}
}
var build = {
js: function(files, bundle) {
for (var key in files) {
(function(key) {
var name = "js-" + key;
tasks.js.push(name);
gulp.task(name, function() {
return gulp
.src(bundles[bundle].js[key])
.pipe(concat(key))
.pipe(uglify())
.pipe(size({
gulp.task(name, () => {
return gulp
.src(bundles[bundle].js[key])
.pipe(plumber())
.pipe(concat(key))
.pipe(terser())
.pipe(
size({
showFiles: true,
gzip: true
}))
.pipe(gulp.dest(paths[bundle].output));
});
})(key);
}
gzip: true,
}),
)
.pipe(gulp.dest(paths[bundle].output));
});
});
},
less: function(files, bundle) {
for (var key in files) {
(function(key) {
var name = "less-" + key;
tasks.less.push(name);
less: (files, bundle) => {
Object.keys(files).forEach(key => {
const name = `less-${key}`;
tasks.less.push(name);
gulp.task(name, function() {
return gulp
.src(bundles[bundle].less[key])
.pipe(less())
.on("error", gutil.log)
.pipe(concat(key))
.pipe(prefix(["last 2 versions"], {
cascade: true
}))
.pipe(clean())
.pipe(size({
gulp.task(name, () => {
return gulp
.src(bundles[bundle].less[key])
.pipe(less())
.pipe(concat(key))
.pipe(
prefix(browserslist, {
cascade: false,
}),
)
.pipe(clean())
.pipe(
size({
showFiles: true,
gzip: true
}))
.pipe(gulp.dest(paths[bundle].output));
});
})(key);
}
gzip: true,
}),
)
.pipe(gulp.dest(paths[bundle].output));
});
});
},
sprite: function(bundle) {
var name = "sprite-" + bundle;
sprite: bundle => {
const name = `sprite-${bundle}`;
tasks.sprite.push(name);
// Process Icons
gulp.task(name, function() {
gulp.task(name, () => {
return gulp
.src(paths[bundle].src.sprite)
.pipe(svgmin({
plugins: [{
removeDesc: true
}]
}))
.pipe(
svgmin({
plugins: [
{
removeDesc: true,
},
],
}),
)
.pipe(svgstore())
.pipe(rename({
basename: (bundle == "rangetouch" ? "sprite" : bundle)
}))
.pipe(size({
showFiles: true,
gzip: true
}))
.pipe(
rename({
basename: bundle === 'rangetouch' ? 'sprite' : bundle,
}),
)
.pipe(
size({
showFiles: true,
gzip: true,
}),
)
.pipe(gulp.dest(paths[bundle].output));
});
}
},
};
// Core files
build.js(bundles.rangetouch.js, "rangetouch");
build.js(bundles.rangetouch.js, 'rangetouch');
// Docs files
build.less(bundles.docs.less, "docs");
build.js(bundles.docs.js, "docs");
build.sprite("docs");
build.less(bundles.docs.less, 'docs');
build.js(bundles.docs.js, 'docs');
build.sprite('docs');
// Build all JS
gulp.task("js", function() {
run(tasks.js);
});
gulp.task('js', gulp.parallel(...tasks.js));
// Build SASS (for testing, default is LESS)
gulp.task("sass", function() {
run(tasks.sass);
});
// Watch for file changes
gulp.task("watch", function() {
gulp.task('watch', () => {
// Core
gulp.watch(paths.rangetouch.src.js, tasks.js);
gulp.watch(paths.rangetouch.src.js, gulp.parallel(...tasks.js));
// Docs
gulp.watch(paths.docs.src.js, tasks.js);
gulp.watch(paths.docs.src.less, tasks.less);
gulp.watch(paths.docs.src.sprite, tasks.sprite);
gulp.watch(paths.docs.src.js, gulp.parallel(...tasks.js));
gulp.watch(paths.docs.src.less, gulp.parallel(...tasks.less));
gulp.watch(paths.docs.src.sprite, gulp.parallel(...tasks.sprite));
});
// Default gulp task
gulp.task("default", function() {
run(tasks.js, tasks.less, tasks.sprite, "watch");
});
gulp.task('default', gulp.parallel(...tasks.js, ...tasks.less, ...tasks.sprite, 'watch'));

@@ -181,86 +187,114 @@ // Publish a version to CDN and docs

// Some options
var aws = loadJSON(path.join(root, "aws.json"));
var version = loadJSON(path.join(root, "package.json")).version;
var maxAge = 31536000; // seconds 1 year
var options = {
const maxAge = 31536000; // seconds 1 year
const headers = {
cdn: {
headers: {
"Cache-Control": "max-age=" + maxAge,
"Vary": "Accept-Encoding"
}
'Cache-Control': `max-age=${maxAge}`,
},
docs: {
headers: {
"Cache-Control": "public, must-revalidate, proxy-revalidate, max-age=0",
"Vary": "Accept-Encoding"
}
}
'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0',
},
};
// If aws is setup
if ("cdn" in aws) {
var regex = "(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)";
var cdnpath = new RegExp(aws.cdn.domain + "\/" + regex, "gi");
var semver = new RegExp("v" + regex, "gi");
var localpath = new RegExp("(\.\.\/)?dist", "gi");
}
const regex = '(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)';
const cdnpath = new RegExp(`${deploy.cdn.domain}/${regex}`, 'gi');
const semver = new RegExp(`v${regex}`, 'gi');
const localpath = new RegExp('(../)?dist', 'gi');
// Publish version to CDN bucket
gulp.task("cdn", function() {
console.log("Uploading " + version + " to " + aws.cdn.bucket);
gulp.task('cdn', () => {
const { bucket, publisher } = deploy.cdn;
if (!publisher) {
throw new Error('No publisher instance. Check AWS configuration.');
}
log(`Uploading ${version} to ${bucket}`);
// Upload to CDN
gulp.src(paths.upload)
.pipe(size({
showFiles: true,
gzip: true
}))
.pipe(rename(function(path) {
path.dirname = path.dirname.replace(".", version);
}))
.pipe(s3(aws.cdn, options.cdn));
return gulp
.src(paths.upload)
.pipe(
size({
showFiles: true,
gzip: true,
}),
)
.pipe(
rename(path => {
path.dirname = path.dirname.replace('.', version);
}),
)
.pipe(publisher.publish(headers.cdn))
.pipe(publish.reporter());
});
// Publish to Docs bucket
gulp.task("docs", function() {
console.log("Uploading " + version + " docs to " + aws.docs.bucket);
// Replace versioned files in readme.md
gulp.task('docs:readme', () => {
const { domain } = deploy.docs;
// Replace versioned files in readme.md
gulp.src([root + "/readme.md"])
.pipe(replace(cdnpath, aws.cdn.domain + "/" + version))
return gulp
.src([`${root}/readme.md`])
.pipe(replace(cdnpath, `${domain}/${version}`))
.pipe(gulp.dest(root));
});
// Replace versioned files in rangetouch.js
gulp.src(path.join(root, "src/js/rangetouch.js"))
.pipe(replace(semver, "v" + version))
.pipe(gulp.dest(path.join(root, "src/js/")));
// Replace versions in rangetouch.js
gulp.task('docs:src', () =>
gulp
.src(path.join(root, 'src/js/rangetouch.js'))
.pipe(replace(semver, `v${version}`))
.pipe(gulp.dest(path.join(root, 'src/js/'))),
);
// Replace local file paths with remote paths in docs
// e.g. "../dist/rangetouch.js" to "https://cdn.rangetouch.com/x.x.x/rangetouch.js"
gulp.src([paths.docs.root + "*.html"])
.pipe(replace(localpath, "https://" + aws.cdn.domain + "/" + version))
.pipe(s3(aws.docs, options.docs));
// Replace local file paths with remote paths in docs
// e.g. "../dist/rangetouch.js" to "https://cdn.rangetouch.com/x.x.x/rangetouch.js"
gulp.task('docs:paths', () => {
const { domain, publisher } = deploy.docs;
// Upload error.html to cdn (as well as docs site)
gulp.src([paths.docs.root + "error.html"])
.pipe(replace(localpath, "https://" + aws.cdn.domain + "/" + version))
.pipe(s3(aws.cdn, options.docs));
if (!publisher) {
throw new Error('No publisher instance. Check AWS configuration.');
}
return gulp
.src([`${paths.docs.root}*.html`])
.pipe(replace(localpath, `https://${domain}/${version}`))
.pipe(publisher.publish(headers.docs))
.pipe(publish.reporter());
});
// Upload error.html to cdn (as well as docs site)
gulp.task('docs:error', () => {
const { domain, publisher } = deploy.docs;
if (!publisher) {
throw new Error('No publisher instance. Check AWS configuration.');
}
return gulp
.src([`${paths.docs.root}error.html`])
.pipe(replace(localpath, `https://${domain}/${version}`))
.pipe(publisher.publish(headers.docs))
.pipe(publish.reporter());
});
// Publish to Docs bucket
gulp.task('docs', gulp.parallel('docs:readme', 'docs:src', 'docs:paths', 'docs:error'));
// Open the docs site to check it's sweet
gulp.task("open", function() {
console.log("Opening " + aws.docs.bucket + "...");
gulp.task('open', () => {
const { bucket } = deploy.docs;
log(`Opening ${bucket}...`);
// A file must be specified or gulp will skip the task
// Doesn't matter which file since we set the URL above
// Weird, I know...
gulp.src([paths.docs.root + "index.html"])
.pipe(open("", {
url: "https://" + aws.docs.bucket
}));
return gulp.src([`${paths.docs.root}index.html`]).pipe(
open('', {
url: `https://${bucket}`,
}),
);
});
// Do everything
gulp.task("publish", function() {
run(tasks.js, tasks.less, tasks.sprite, "cdn", "docs");
});
gulp.task('publish', gulp.series(gulp.parallel(...tasks.js, ...tasks.less, ...tasks.sprite), 'cdn', 'docs'));
The MIT License (MIT)
Copyright (c) 2017 Sam Potts
Copyright (c) 2019 Sam Potts

@@ -21,2 +21,2 @@ Permission is hereby granted, free of charge, to any person obtaining a copy

OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
SOFTWARE.
{
"name": "rangetouch",
"version": "1.0.5",
"version": "1.0.6",
"description": "A super tiny library to make input type='range' sliders work better on touch devices",
"homepage": "https://rangetouch.com",
"main": "src/js/rangetouch.js",
"dependencies": {},
"devDependencies": {
"gulp": "^3.9.0",
"gulp-autoprefixer": "^4.0.0",
"gulp-clean-css": "^3.2.0",
"gulp-concat": "^2.6.1",
"gulp-less": "^3.3.0",
"gulp-open": "^2.0.0",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.5.4",
"gulp-s3": "^0.11.0",
"gulp-size": "^2.1.0",
"gulp-svgmin": "^1.0.0",
"gulp-svgstore": "^6.1.0",
"gulp-uglify": "^2.1.2",
"gulp-util": "^3.0.8",
"run-sequence": "^1.2.2"
},
"browserslist": [
"> 1%"
],
"keywords": [

@@ -44,3 +29,27 @@ "range",

},
"author": "Sam Potts <sam@potts.es>"
"author": "Sam Potts <sam@potts.es>",
"dependencies": {},
"devDependencies": {
"aws-sdk": "^2.400.0",
"eslint": "^5.13.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-config-prettier": "^4.0.0",
"eslint-plugin-import": "^2.16.0",
"fancy-log": "^1.3.3",
"gulp": "^4.0.0",
"gulp-autoprefixer": "^6.0.0",
"gulp-awspublish": "^4.0.0",
"gulp-clean-css": "^4.0.0",
"gulp-concat": "^2.6.1",
"gulp-less": "^4.0.1",
"gulp-open": "^3.0.1",
"gulp-plumber": "^1.2.1",
"gulp-rename": "^1.4.0",
"gulp-replace": "^1.0.0",
"gulp-size": "^3.0.0",
"gulp-svgmin": "^2.1.0",
"gulp-svgstore": "^7.0.1",
"gulp-terser": "^1.1.7",
"gulp-util": "^3.0.8"
}
}
# RangeTouch
A super tiny library to make `<input type="range">` sliders work better on touch devices.

@@ -9,10 +10,13 @@

## Why?
While building [plyr](https://plyr.io) 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
- No setup required, just include the script
- Less than 1KB minified and gzipped
- No dependencies (written in "vanilla" JavaScript)
- No setup required, just include the script
- Less than 1KB minified and gzipped
- No dependencies (written in "vanilla" JavaScript)
## Quick setup
To use RangeTouch, you just need to add `rangetouch.js` (either from the `/dist` (minified) or `/src/js` (unminified) folders). Ideally before the closing `</body>` tag:

@@ -27,9 +31,11 @@

### CDN
You can load RangeTouch from our CDN (backed by the awesome [Fastly](https://www.fastly.com/)) if you'd like:
```html
<script src="https://cdn.rangetouch.com/1.0.5/rangetouch.js"></script>
<script src="https://rangetouch.com/1.0.6/rangetouch.js"></script>
```
### Node / NPM
[![npm version](https://badge.fury.io/js/rangetouch.svg)](https://badge.fury.io/js/rangetouch)

@@ -56,6 +62,7 @@

## Configuration
If you're customizing your range inputs (easily done - see the demo for an example) and you change the size of the thumb handle, you should specify (in pixels) this after including the script:
```javascript
window.rangetouch.set("thumbWidth", 15);
window.rangetouch.set('thumbWidth', 15);
```

@@ -68,8 +75,11 @@

## Issues
If you find anything weird with RangeTouch, please let us know using the GitHub issues tracker.
## Author
RangeTouch is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me](http://sampotts.me)
## Donate
RangeTouch costs money to run, not my time - I donate that for free but domains, hosting and more. Any help is appreciated...

@@ -79,2 +89,3 @@ [Donate to support RangeTouch](https://www.paypal.me/pottsy/20usd)

## Thanks
[![Fastly](https://www.fastly.com/sites/all/themes/custom/fastly2016/logo.png)](https://www.fastly.com/)

@@ -85,2 +96,3 @@

## Copyright and License
[The MIT license](license.md).
// ==========================================================================
// rangetouch.js v1.0.5
// rangetouch.js v1.0.6
// Making <input type="range"> work on touch devices

@@ -24,3 +24,3 @@ // https://github.com/selz/rangetouch

}
}(typeof window !== 'undefined' ? window : this, function(window, document) {
})(typeof window !== 'undefined' ? window : this, function(window, document) {
'use strict';

@@ -35,3 +35,3 @@

range: '[type="range"]',
disabled: '.rangetouch--disabled'
disabled: '.rangetouch--disabled',
},

@@ -41,4 +41,4 @@ events: {

move: 'touchmove',
end: 'touchend'
}
end: 'touchend',
},
};

@@ -55,5 +55,7 @@

if (settings.addCSS) {
var stylesheets = document.styleSheets;
var stylesheet = stylesheets.length ? stylesheets[0] : createStyleSheet();
stylesheet.insertRule(getSelector() + ' { user-select: none; -webkit-user-select: none; touch-action: manipulation; }', 0);
var stylesheet = createStyleSheet();
stylesheet.insertRule(
getSelector() + ' { user-select: none; -webkit-user-select: none; touch-action: manipulation; }',
0,
);
}

@@ -74,4 +76,4 @@

function createStyleSheet() {
var style = document.createElement("style");
style.appendChild(document.createTextNode(""));
var style = document.createElement('style');
style.appendChild(document.createTextNode(''));
document.head.appendChild(style);

@@ -99,3 +101,3 @@ return style.sheet;

cancelable: false,
detail: undefined
detail: undefined,
};

@@ -112,3 +114,3 @@ var custom = document.createEvent('CustomEvent');

bubbles: true,
detail: properties
detail: properties,
});

@@ -122,3 +124,3 @@

function getSelector() {
return [settings.selectors.range, ":not(", settings.selectors.disabled, ")"].join("");
return [settings.selectors.range, ':not(', settings.selectors.disabled, ')'].join('');
}

@@ -152,4 +154,4 @@

(match[1] ? match[1].length : 0) -
// Adjust for scientific notation.
(match[2] ? +match[2] : 0)
// Adjust for scientific notation.
(match[2] ? +match[2] : 0),
);

@@ -164,3 +166,3 @@ }

}
return (Math.round(number / step) * step);
return Math.round(number / step) * step;
}

@@ -180,6 +182,6 @@

var clientRect = input.getBoundingClientRect();
var thumbWidth = (((100 / clientRect.width) * (settings.thumbWidth / 2)) / 100);
var thumbWidth = ((100 / clientRect.width) * (settings.thumbWidth / 2)) / 100;
// Determine left percentage
percent = ((100 / clientRect.width) * (touch.clientX - clientRect.left));
percent = (100 / clientRect.width) * (touch.clientX - clientRect.left);

@@ -195,5 +197,5 @@ // Don't allow outside bounds

if (percent < 50) {
percent -= ((100 - (percent * 2)) * thumbWidth);
percent -= (100 - percent * 2) * thumbWidth;
} else if (percent > 50) {
percent += (((percent - 50) * 2) * thumbWidth);
percent += (percent - 50) * 2 * thumbWidth;
}

@@ -219,3 +221,3 @@

// Trigger input event
trigger(event.target, (event.type === settings.events.end ? 'change' : 'input'));
trigger(event.target, event.type === settings.events.end ? 'change' : 'input');
}

@@ -229,4 +231,4 @@

settings[setting] = value;
}
},
};
}));
});

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc