This lightweight JavaScript range slider works on mobile devices such as iOS or Android without any dependencies such as jQuery. It basically restyles the existing input[type=range] in a mobile-friendly way, and delegates value changes to the underlying range input.

The constructor takes an ID or reference to an input of type range.

new MobileRangeSlider('my_slider'); // passing an ID
new MobileRangeSlider(element);     // passing a DOM element

<input id="my_slider" type="range" min="1" max="100">

You can pass in additional defaults as follows:

var slider = new MobileRangeSlider('slider', {
  min: -50,
  max: 50,
  value: 0,
  // Called when value of slider changes
  change: function(value){
    console.log(value);
  }
});

...

slider.setValue(25);

• value - initial value. Defaul: 0
• min - minimum value. Default: 0
• max - maximum value. Default: 100
• change - callback handler

Forked from: https://github.com/ubilabs/mobile-range-slider