Customizable & Snappable Range Slider Plugin - Range Stepper

File Size: 5.46 KB
Views Total: 2428
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></script>
<script src="js/rangestepper.js"></script>

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


// 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:


  • 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.