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

Category: Javascript , Recommended , Slider | April 6, 2019
Author: Stryzhevskyi
Views Total: 7,316
Official Page: Go to website
Last Update: April 6, 2019
License: MIT

Preview:

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

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.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

You Might Be Interested In:


Leave a Reply