Mobile-friendly Custom Range Slider In JavaScript – range-slider

Preview:

Description:

A responsive, touch-enabled, progressively enhanced range slider plugin that gracefully degrades to a standard HTML5 range input if JavaScript is disabled.

More features:

• Supports both horizontal and vertical range sliders.
• Supports multiple range selection.
• Easy to style using your own CSS.
• Allows you to set min/max/initial values.

How to use it:

1. Load the range-slider’s JavaScript and CSS files in the document.

<link href="range-slider.min.css" rel="stylesheet" />
<script src="range-slider.min.js"></script>

2. Generate a basic range slider on the page.

<div id="placeholder"></div>

var mySlider = document.getElementById('placeholder');
// horizontal range slider
RS(mySlider, function(value, target, event) {
  // ...
});
// vertical range slider
RS(mySlider, function(value, target, event) {
  // ...
}, true);

3. You can also initialize the plugin as a vertical range slider as follows:

RS(mySlider, {
  vertical: true
});

4. Set the initial value.

RS(mySlider, {
  value: 1
});

5. Callback functions.

RS(mySlider, {
  create: function(value, target) { 
    // on creat
  }, 
  start: function(value, target, event) { 
    // on start
  },
  drag: function(value, target, event) { 
    // on drag
  }, 
  stop: function(value, target, event) { 
    // on drag end
  } 
});