jRange

jQuery Plugin to create Range Selector

See it in Action

Play around with the demo

$('.single-slider').jRange({
    from: -2.0,
    to: 2.0,
    step: 0.5,
    scale: [-2.0,-1.0,0.0,1.0,2.0],
    format: '%s',
    width: 300,
    showLabels: true,
    snap: 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"

snap Optional Boolean Default : false

True to snap slider to step values

disable Optional Boolean Default : false

True if this is a disable(read only) range selector. You can also change disable status later by calling.

$('.slider').jRange('disable'); $('.slider').jRange('enable'); $('.slider').jRange('toggleDisable');
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.

ondragend Optional Function

ondragend callback. Useful if you want to fire event just once per slider drag.

onbarclicked Optional Function

called when user clicks on the bar

Modification

Change values on runtime

Methods which you can call to dynamically modify current values and range.

Method Description
setValue

sets the current value of the slider without changing its range, if you want to update the range as well use updateRange instead.

$('.slider').jRange('setValue', '10,20');
$('.slider').jRange('setValue', '10');
updateRange

'updateRange' to change (min, max) value and interval after initialized.

$('.slider').jRange('updateRange', '0,100');
$('.slider').jRange('updateRange', '0,100', '25,50');
$('.slider').jRange('updateRange', '0,100', 25);

passing second parameter also sets its current value