Pure Javascript Range Slider In Vanilla

Category: Slideshow | February 10, 2019
Pure Javascript Touch-enabled Range Slider In Vanilla
Author: Stryzhevskyi
Official Page: Go to Website
Last Update:November 23, 2019
License:MIT

Learn how to build a pure Javascript range slider in Vanilla. You can use it for creating a custom input range that gives users easy to select the values by sliding the horizontal line.

It’s a simple, small and super fast vanilla JavaScript polyfill for the HTML5 <input type="range"> slider element.

Let’s check out the list of its few of features:

  • Work well on mobile and tablet devices.
  • The range slide is fully touchscreen friendly.
  • Recalculates onresize
  • Small Javascript and super-fast.
  • Supports all major browsers including older versions.
  • Buffer progress bar (for downloading progress etc.)

The range slider is built with Pure Javascript without using jQuery support. It’s a vanilla javascript library that allows us to converts the HTML5 range inputs types into fully responsive and touch-enabled range UI Slider control.

It’s a simple, small and pretty much fast vanilla Javascript polyfill for HTML 5 input type slider element. It is fully responsive and works well with all kinds of devices including a touchscreen.

If we talk about browser support, It works pretty well with all major browsers without having any issue.

How to Add Range Slider into Your Webpage

You need to load the style.css and Javascript file to get start implementation on your website.

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

Next, you need to create a simple input type range and add min/Max values. To implement the plugin functionality on the input type, you need to add the data attribute data-range slider

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

You can also define the min/max value in the negative.

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

The Javascript

Finally, You need to initialize the Javascript function

// 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);
}

That’s all you need to do. Enjoy!

.

You May Also Like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.