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

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