Create range slider using jquery plugin

In this tutorial I am going to introduce wonderful plugin to create range slider in jquery. There is plugin called Ion.RangeSlider. with the help of this plugin you can easily make cool, comfortable, responsive and easily customizable range slider in sec. This plugin will help you to add range search feature in your product search catelog, You must have seen this feature in sopping websites that user can sort products by range or price.
range-slider
Plugin support Cross-browser: Google Chrome, Mozilla Firefox 3.6+, Opera 12+, Safari 5+, Internet Explorer 8+. It also upports touch-devices (iPhone, iPad, Nexus, etc.).


Slider features

* Any number of sliders at one page without conflicts and big performance problems
* Two slider types single (1 slider) and double (2 sliders)
* Support of negative and fractional values
* Ability to set custom step and snap grid to step
* Support of custom values diapason
* Customisable grid of values
* Ability to disable UI elements (min and max, current value, grid)
* Postfixes and prefixes for your numbers ($20, 20 € , 10 Rs etc.)
* Additional postfix for maximum value (eg. $0 — $100+)
* Ability to prettify large numbers (eg. 10000000 -> 10 000 000 or 10.000.000)
* Slider writes its value right into input value field. This makes it easy to use in any html form
* Any slider value can be set through input data-attribute (eg. data-min=”10″)
* Slider supports disable param. You can set it true to make slider inactive
* Slider supports external methods (update, reset and remove) to control it after creation
* For advanced users slider has callbacks (onStart, onChange, onFinish, onUpdate). Slider pastes * all its params to callback first argument as object
* Slider supports date and time

Let’s Start Integration

In this slider there are four skins (ion.rangeSlider.skinFlat.css, ion.rangeSlider.skinHTML5.css, ion.rangeSlider.skinModern.css, ion.rangeSlider.skinNice.css) you can use any of them. just add that css on page.

<link rel="stylesheet" href="css/ion.rangeSlider.css">
<link rel="stylesheet" href="css/ion.rangeSlider.skinFlat.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/ion.rangeSlider.min.js"></script>

Now add input text box on page, will work like slide range box.

<input type="text" id="rang" name="rang" value="" />

Now call ionRangeSlider() to make it actionable.

<script>
$(function() {   
$("#rang").ionRangeSlider({
    min: 0,
    max: 10000,
    from: 1000,
    to: 9000,
    type: 'double',
    prefix: "Rs. ",
    grid: true,
    grid_num: 10
});
});
</script>



You can also use data attribute method to make it actionable, add all parameter with data attribute.

data-min="0"
data-max="10000"
data-from="1000"
data-to="9000"
data-type="double"
data-prefix="$"
data-grid="true"
data-grid-num="10"

See Example..

<input type="text" id="rang1" name="rang1" value="" data-min="0" data-max="10000" data-from="2000" data-to="7000" data-prefix="Rs. " data-grid="true" data-grid-num="10" data-type="double" />
<script>
$(function() {   
$("#rang1").ionRangeSlider();
});
</script>

Store data range instance on variable and use it to modify parameter later.

// Saving it's instance to var
var slider = $("#range").data("ionRangeSlider");
 
// Fire public method
slider.reset();
 
// UPDATE - updates slider to any new values
slider.update({
    from: 300,
    to: 400
});
 
// RESET - reset slider to it's first values
slider.reset();
 
// DESTROY - destroys slider and restores original input field
slider.destroy();

See live demo and download sample source code.

DEMO

DOWNLOAD

See more features and demos on their official website, and add customisation as per your project need.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.