jQuery范围选择拖动滑块

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

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

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

jRange

jQuery Plugin to create Range Selector