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

<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: 0.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