A dependency-free, responsive and touch-enabled javascript range slider written in vanilla javascript.
npm install rangeable elements prettier and more configurable.
v1.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');
``