Coding
posted by Maan

jQuery Range Slider With Skin Support

Ion.Range Slider is a nice, comfortable and easily customizable range slider with skins support. Also support events and public methods, has flexible settings, can be completely altered with CSS. It supports touch-devices which includes iPhone, iPad and etc. It has been tested on Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+). It is freely distributed under MIT licence.

Using script

Import this libraries:

    • jQuery
    • ion.rangeSlider.min.js

And CSS:

    • normalize.min.css – desirable if you have not yet connected one
    • ion.rangeSlider.css
    • ion.rangeSlider.skinName.css

Don’t forget about skin image:

    • sprite-skin-simple.png – Simple skin
    • sprite-skin-nice.png – Nice skin
    • Or use included PSD file and draw your own skin (don’t forget to modify skin css after that)

Create base input element:

<input type="text" id="someID" name="rangeName" value="10;100" />

Initialize slider:

$("#someID").ionRangeSlider();

Or initialize slider with custom settings:

$("#someID").ionRangeSlider({
    min: 10,                        // min value
    max: 100,                       // max value
    from: 30,                       // <a rel="wpi" target="_blank" title="craig24.com &lt;&gt; How to change the default Spanish dictionary on ..." href="http://craig24.com/2013/02/how-to-change-the-default-spanish-dictionary-on-kindle-for-ipad/">overwrite default</a> FROM setting
    to: 80,                         // overwrite default TO setting
    type: "single",                 // slider type
    step: 10,                       // slider step
    postfix: " pounds",             // postfix text
    hasGrid: true,                  // enable grid
    hideText: true,                 // hide all text data
    onChange: function(obj){        // function-callback, is called on every change
        console.log(obj);
    },
    onFinish: function(obj){        // function-callback, is called once, after slider finished it's work
        console.log(obj);
    }
})

You can also initialize slider with data-* attributes of input tag:

data-from="30"                      // overwrite default FROM setting
data-to="70"                        // overwrite default TO setting
data-type="double"                  // slider type
data-step="10"                      // slider step
data-postfix=" pounds"              // postfix text
data-hasgrid="true"                 // enable grid
data-hidetext="true"                // hide all text data
Maan

21 year old designer, blogger and front-end developer. love to share creative design and inspiration.

comments powered by Disqus