jRange : jQuery Range Selector

See it in Action

Play around with the demo

$('.single-slider').jRange({
    from: 0,
    to: 100,
    step: 1,
    scale: [0,50,100],
    format: '%s',
    width: 300,
    showLabels: true
});

$('.range-slider').jRange({
    from: 0,
    to: 100,
    step: 1,
    scale: [0,25,50,75,100],
    format: '%s',
    width: 300,
    showLabels: true,
    isRange : true
});

How to Use

Lets see some code

To get started you'll have to include jquery.range.js and jquery.range.css files in your html file.

<link rel="stylesheet" href="jquery.range.css">
<script src="jquery.range.js"></script>

Later just add an hidden input, where ever you want this slider to be shown.

<input type="hidden" class="slider-input" value="23" />

After this you'll have to intialize this plugin for that input, as shown in the example above

Options

See configuration options

Options can also be set programatically, by passing an options hash to the jRange method.

Option	Override	Type	Details
from	Mandatory	Integer	Lower bound of slider
to	Mandatory	Integer	Upper bound of slider
step	Optional	Integer	`Default : 1` amount of increment on each step
scale	Optional	Array	Array containing label which are shown below the slider. By default its [from, to].
showLabels	Optional	Boolean	False, if you'd like to hide label which are shown on top of slider. `Default : true`
showScale	Optional	Boolean	False, if you'd like to hide scale which are shown below the slider. `Default : true`
format	Optional	String / Function	this is used to show label on the pointer `Default : "%s"` `String` : %s is replaced by its value, e.g., "%s days", "%s goats" `Function` : format(value, pointer) `return` : string label for a given value and pointer. `pointer` could be 'low'/'high' if `isRange` is true, else undefined
width	Optional	Integer	`Default : 300`
theme	Optional	String	`Default : "theme-green"` This is the css class name added to the container. Available themes are "theme-blue", "theme-green". You can also add more themes, just like in `jquery.range.less`
isRange	Optional	Boolean	`Default : false` True if this is a range selector. If its a range the value of hidden input will be set comma-seperated, e.g., "25,75"
onstatechange	Optional	Function	This function is called whenever the value is changed by user. This same value is also automatically set for the provided Hidden Input. For single slider value is without comma, however for a range selector value is comma-seperated.

jRange