Easy to use,flexible and responsive range slider with skin support. Demo page.
Usage
To use the plugin,you need to add the following files.
<!-- CSS --><link rel="stylesheet" href="libs/range-slider/css/ion.rangeSlider.min.css" type="text/css"><!-- Javascript --><script src="libs/range-slider/js/ion.rangeSlider.min.js"></script>Basic Example
Set min value,max value and start point
<input type="text" id="demo_1">$("#demo_1").ionRangeSlider({min:100,max:1000,from:550,skin:"round"});Prefix
$("#demo_2").ionRangeSlider({type:"double",grid:true,min:0,max:1000,from:200,to:800,prefix:"$",skin:"round"});Step
$("#demo_3").ionRangeSlider({type:"double",grid:true,min:-1000,max:1000,from:-500,to:500,step:100});Fractional
$("#demo_4").ionRangeSlider({type:"double",grid:true,min:-12.8,max:12.8,from:-3.2,to:3.2,step:.1,skin:"round"});Values array could be anything,even strings
$("#rangeSlider-example").ionRangeSlider({grid:true,from:new Date().getMonth(),values:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],skin:"round"});
On this page