Responsive & Touch-enabled Range Slider In Vanilla JavaScript – rangeSlider

Preview:

Description:

rangeSlider is a pure Vanilla JavaScript library that converts regular Html5 range inputs into responsive, mobile-friendly range slider UI controls.

Installation:

# Yarn
$ yarn add rangeslider-pure
# NPM
$ npm install rangeslider-pure --save

How to use it:

Load the rangeSlider.css for default styles.

<link rel="stylesheet" href="dist/rangeSlider.css">

Load the rangeSlider.js at the end of the document.

<script src="dist/rangeSlider.js"></script>

Create a normal range input in the document.

<input type="range" min="0" max="5" data-rangeSlider>

Usage.

// Initialize a new plugin instance for element or array of elements.
var slider = document.querySelectorAll('input[type="range"]')
rangeSlider.create(slider, {
  polyfill: true,   // Boolean, if true, custom markup will be created
  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'],
  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]
  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);
  }
});
// then...
var giveMeSomeEvents = true; // or false
slider.rangeSlider.update({min : 0, max : 20, step : 0.5, value : 1.5, buffer : 70}, giveMeSomeEvents);
// or
slider.rangeSlider.onSlideStart: function (position, value) {
  console.error('anotherCallback', 'position: ' + position, 'value: ' + value);
}

Changelog:

v0.4.11 (09/08/2019)

• Fix issue with scroll in Safari

v0.4.10 (06/01/2019)

• Use title attribute from input element

v0.4.9 (04/27/2019)

• Prevent triggering change event on slider init

v0.4.8 (04/06/2019)

• add version to RangeSlider
• expose internal modules (dom, functions)
• fix offsetWidth of undefined

v0.4.7 (02/09/2019)

• update dependencies
• fix getDimension function

12/02/2018

• v0.4.6: fix buffer (without z-index), code formatting

07/04/2018

• v0.4.5