A dependency-free, responsive and touch-enabled javascript range slider written in vanilla javascript.
npm install rangeablev1.0.0. Check back regularly for any changes and make sure you have the latest version installed.
npm install rangeable --save
`
---
$3
Grab the files from one of the CDNs and include them in your page:
`
https://unpkg.com/rangeable@latest/dist/rangeable.min.css
https://unpkg.com/rangeable@latest/dist/rangeable.min.js
`
You can replace latest with the required release number if needed.
---
$3
Create a new instance:
`javascript
const rangeable = new Rangeable(input, {
type: "single",
tooltips: "always",
min: 0,
max: 100,
step: 1,
value: 50,
vertical: false,
handle: undefined,
handles: undefined,
onInit: function() {
// do something when the instance has loaded
},
onStart: function() {
// do something on mousedown/touchstart
},
onChange: function() {
// do something when the value changes
},
onEnd: function() {
// do something on mouseup/touchend
},
classes: {
input: "rangeable-input",
container: "rangeable-container",
vertical: "rangeable-vertical",
progress: "rangeable-progress",
handle: "rangeable-handle",
tooltip: "rangeable-tooltip",
track: "rangeable-track",
multiple: "rangeable-multiple",
}
});
`
You can pass either a reference to the input or a CSS3 selector string:
`javascript
const myRangeInput = document.getElementById('myRangeInput');
const rangeable = new Rangeable(myRangeInput);
// or
const rangeable = new Rangeable('#myRangeInput');
``