Responsive & Touch-Friendly jQuery Range Slider Plugin

Responsive & Touch-Friendly jQuery Range Slider Plugin
File Size: 14.7KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Rangeslider.js is a simple, lightweight jQuery plugin to replace the default Html5 range slider input and make it support old browsers like IE 7/8/9. Callbacks supported that allow you to do some stuff when on slide or on slide end.

Related plugins:

How to use it:

1. Include rangeslider.css file in the head section of your page. Feel free to change it to create your own styles.

<link href="rangeslider.css" rel="stylesheet" type="text/css">

2. Add X-UA-Compatible Meta Tag to the head section.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

3. Create a range slider using HTML5 range slider input.

<input type="range" min="10" max="100" step="10" value="50">

4. Include jQuery library and jQuery Rangeslider.js script in the bottom of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="rangeslider.js"></script>

5. Call the plugin on the input field.

<script>
$(function() {
$('input[type="range"]').rangeslider({
polyfill: true,
onSlide: function(position, value) {
// do some stuff ...
},
onSlideEnd: function(position) {
// do some stuff ...
}
});
});
</script>

Change log:

v0.2.2 (2014-02-07)

  • Fixed an issue in ie9 to get the attributes (min,max,step)

This awesome jQuery plugin is developed by andreruffert. For more Advanced Usages, please check the demo page or visit the official website.