Customizable Range Slider Plugin For jQuery - Range Control

A simple, powerful jQuery range control plugin which converts the hidden input fields into fully configurable range sliders with custom scales, labels and directions.

Basic usage:

1. Include jQuery library and the jQuery range control plugin's files on the html page.

<script src="//code.jquery.com/jquery-3.1.0.js"></script>
<link rel="stylesheet" href="jquery.range-control.css">
<script src="jquery.range-control.js"></script>

2. Create a normal hidden input on the page and pass in the plugin options via 'data-options' attribute as follows:

<input type="hidden" 
       name="demo" 
       class="range" 
       id="demo" 
       data-options='{...}' 
       value=""
>

3. Call the function on the input and done.

$('.range').rangeControl();

4. All possible plugin options with default values.

$('.range').rangeControl({
  min: 0,
  max: 100,
  step: 1,
  delim: ',',
  orientation: 'horizontal',
  disabled: false,
  rangeType: 'single',
  minHandles: 1,
  maxHandles: 1,
  allowPaging: true,
  stepsPerPage: 10,
  currentValue: {
    position: 'top'
  },
  scale: {
    position: 'bottom',
    labels: false,
    interval: 10
  },
  className: ''
});

5. Events.

$('.range').on('rangeControlChange.rangeControlEvent', function () {
  // on change event
});

$('.range').on('rangeControlSlide.rangeControlEvent', function () {
  // on slide event
});

---

This awesome jQuery plugin is developed by 17.3 KB. For more Advanced Usages, please check the demo page or visit the official website.