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

Category: Form , Javascript | December 23, 2019
Author: taufik-nurrohman
Views Total: 176
Official Page: Go to website
Last Update: December 23, 2019
License: MIT

Preview:

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

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

You Might Be Interested In:


Leave a Reply