https://github.com/Stryzhevskyi/rangeSlider
Simple, small and fast vanilla JavaScript polyfill for the HTML5 `<input type="range">` slider element.
https://github.com/Stryzhevskyi/rangeSlider
es6 input-range pure-javascript range-slider rangeslider vanilla-javascript
Last synced: 11 months ago
JSON representation
Simple, small and fast vanilla JavaScript polyfill for the HTML5 `<input type="range">` slider element.
- Host: GitHub
- URL: https://github.com/Stryzhevskyi/rangeSlider
- Owner: Stryzhevskyi
- License: mit
- Created: 2015-02-19T19:51:55.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2020-02-17T20:02:50.000Z (over 6 years ago)
- Last Synced: 2024-11-11T10:32:36.436Z (over 1 year ago)
- Topics: es6, input-range, pure-javascript, range-slider, rangeslider, vanilla-javascript
- Language: JavaScript
- Size: 528 KB
- Stars: 177
- Watchers: 6
- Forks: 42
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# rangeSlider
> Simple, small and fast vanilla JavaScript polyfill for the HTML5 `` slider element.
> Forked from [André Ruffert's jQuery plugin](https://github.com/andreruffert/rangeslider.js)
Check out the [examples](http://stryzhevskyi.github.io/rangeSlider/).
* Touchscreen friendly
* Recalculates `onresize`
* Small and fast
* Supports all major browsers
* Buffer progressbar (for downloading progress etc.)
## Install
Install with [npm](https://www.npmjs.com/package/rangeslider-pure):
``npm install --save rangeslider-pure``
## Usage
```js
// Initialize a new plugin instance for one element or NodeList of elements.
const slider = document.querySelector('input[type="range"]');
rangeSlider.create(slider, {
polyfill: true, // Boolean, if true, custom markup will be created
root: document,
rangeClass: 'rangeSlider',
disabledClass: 'rangeSlider--disabled',
fillClass: 'rangeSlider__fill',
bufferClass: 'rangeSlider__buffer',
handleClass: 'rangeSlider__handle',
startEvent: ['mousedown', 'touchstart', 'pointerdown'],
moveEvent: ['mousemove', 'touchmove', 'pointermove'],
endEvent: ['mouseup', 'touchend', 'pointerup'],
vertical: false, // Boolean, if true slider will be displayed in vertical orientation
min: null, // Number, 0
max: null, // Number, 100
step: null, // Number, 1
value: null, // Number, center of slider
buffer: null, // Number, in percent, 0 by default
stick: null, // [Number stickTo, Number stickRadius] : use it if handle should stick to ${stickTo}-th value in ${stickRadius}
borderRadius: 10, // Number, if you're using buffer + border-radius in css
onInit: function () {
console.info('onInit')
},
onSlideStart: function (position, value) {
console.info('onSlideStart', 'position: ' + position, 'value: ' + value);
},
onSlide: function (position, value) {
console.log('onSlide', 'position: ' + position, 'value: ' + value);
},
onSlideEnd: function (position, value) {
console.warn('onSlideEnd', 'position: ' + position, 'value: ' + value);
}
});
// update position
const triggerEvents = true; // or false
slider.rangeSlider.update({
min : 0,
max : 20,
step : 0.5,
value : 1.5,
buffer : 70
}, triggerEvents);
```
```html
```
### Internal APIs:
```js
/*
* @see src/utils/dom.js
*/
RangeSlider.dom;
/*
* @see src/utils/functions.js
*/
RangeSlider.functions;
RangeSlider.version;
```
Use [JSFiddle](https://jsfiddle.net/Stryzhevskyi/rpsa16fn/) template for issues
Alternative template on [StackBlitz](https://stackblitz.com/edit/rangeslider-pure-example)
## License
MIT