# jRange

## jQuery Plugin to create 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.