Customizable Range Slider Plugin For jQuery - Range Control

File Size: 17.3 KB
Views Total: 5318
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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" 

3. Call the function on the input and done.


4. All possible plugin options with default values.

  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.