Customizable & Snappable Range Slider Plugin - Range Stepper

Range Stepper is a tiny jQuery plugin that transform a DIV element into a highly CSS style-able and snappable range slider/input.

How to use it:

1. Load jQuery library and jQuery range stepper plugin's JS and CSS in the document.

<link href="css/rangestepper.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/rangestepper.js"></script>

2. Call the plugin on a DIV element and set the parameters for the range slider.

$('#container').rangestepper({

// input name
inputName: 'rangestepper',

// set to 0 to place the thumb at the beginning of the range input slider
// if a negative value is set to minVal,
// the thumb will be set at the center/origin where the value reaches 0.
minVal: -10,
maxVal: 10

// display labels for each step
subscript: false

});

3. That's it. The plugin automatically transform the DIV element into an input like this:

<input type="hidden" name="rangestepper">

4. How to get the value.

$('#container input').val();

Change log:

2015-01-10

• Added labels for each step & dragger changes position on click

---

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