0.1.6 • Published 6 years ago
rangeable v0.1.6
Rangeable
A dependency-free, responsive and touch-enabled vanilla javascript range slider to make <input type="range">
elements prettier and more configurable.
- No dependencies
- 3kb gzipped
- Touch enabled
- Responsive
- Single or double range layouts.
- Horizontal and vertical orientations.
- Fully stylable to fit your app.
Rangeable is still in active development and therefore the API is in constant flux until v1.0.0
. Check back regularly for any changes and make sure you have the latest version installed.
Live Demos
Install
npm
npm install rangeable --save
Browser
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.
Default
Create a new instance:
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:
const myRangeInput = document.getElementById('myRangeInput');
const rangeable = new Rangeable(myRangeInput);
// or
const rangeable = new Rangeable('#myRangeInput');
Options
Public Methods
Copyright © 2018 Karl Saunders | BSD & MIT license