Package Exports

rangeslider-pure

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rangeslider-pure) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

rangeSlider

Simple, small and fast vanilla JavaScript polyfill for the HTML5 <input type="range"> slider element. Forked from André Ruffert's jQuery plugin

Check out the examples.

Touchscreen friendly
Recalculates onresize
Small and fast
Supports all major browsers
Buffer progressbar (for downloading progress etc.)

Install

Install with npm: npm install --save rangeslider-pure

Usage

// 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 use buffer + border-radius in css for looks good,
    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);

<input
    type="range"
    min="0"
    max="100"
    step="1"
    data-buffer="60" />

Internal APIs:

/*
* @see src/utils/dom.js
 */
RangeSlider.dom;
/*
* @see src/utils/functions.js
 */
RangeSlider.functions;
RangeSlider.version;

Use JSFiddle template for issues

Alternative template on StackBlitz

License

MIT