# 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