0.4.11 • Published 6 years ago

rangeslider-pure v0.4.11

Weekly downloads
4,919
License
-
Repository
github
Last release
6 years ago

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

0.4.11

6 years ago

0.4.10

6 years ago

0.4.9

6 years ago

0.4.8

6 years ago

0.4.7

7 years ago

0.4.6

7 years ago

0.4.5-1

7 years ago

0.4.5

7 years ago

0.4.4

8 years ago

0.4.3

8 years ago

0.4.2

8 years ago

0.4.1

8 years ago

0.4.0

8 years ago

0.3.11

9 years ago

0.3.10

9 years ago

0.3.9

9 years ago

0.3.8

10 years ago

0.3.7

10 years ago

0.3.6

10 years ago

0.3.5

10 years ago

0.3.4

10 years ago

0.3.2

10 years ago

0.3.0

11 years ago

0.1.0

11 years ago