logo
image
Timotheus Bendan
Sales Manager
Profile Inbox Settings Logout
Range Slider
  • Shopping Cart
    ...
    Digital clock
    1 x $1.190,90
    ...
    Toy Car
    1 x $139.58
    ...
    Sunglasses
    2 x $50,90
    ...
    Cake
    1 x $10,50
    Sub Total :$1.442,78

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

100550 
<input type="text" id="demo_1">
$("#demo_1").ionRangeSlider({min:100,max:1000,from:550,skin:"round"});

Prefix

$200$80002505007501 000 
$("#demo_2").ionRangeSlider({type:"double",grid:true,min:0,max:1000,from:200,to:800,prefix:"$",skin:"round"});

Step

-500500-1 000-50005001 000 
$("#demo_3").ionRangeSlider({type:"double",grid:true,min:-1000,max:1000,from:-500,to:500,step:100});

Fractional

-3.23.2-12.8-6.406.412.8 
$("#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

DecMayJanMaySep 
$("#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