Mar 04, 2014 in Forms 4238 views
Simple, small and fast JavaScript/jQuery polyfill for the HTML5 <input type="range"> slider element.
The easiest way to install the files is with Bower.
You can also do it the old school way and download a zip file.
Using rangeslider.js is simple. Configuration over attributes.
Installation
bower install --save rangeslider.js
Usage
<input type="range" min="10" max="1000" step="10" value="300">
<script src="jquery.min.js"></script>
<script src="rangeslider.min.js"></script>
<script>
$('input[type="range"]').rangeslider();
</script>
Options
<script>
$('input[type="range"]').rangeslider({
// Feature detection
polyfill: true,
// CSS classes
baseClass: 'rangeslider',
rangeClass: 'rangeslider__range',
fillClass: 'rangeslider__fill',
handleClass: 'rangeslider__handle',
// Callback function
onInit: function() {},
// Callback function
onSlide: function(position, value) {},
// Callback function
onSlideEnd: function(position, value) {}
});
</script>
Tagged with:
rangeslider
jquery rangeslier
rangeslider tutorial
input slider
input range
rangeslider demos
Related Articles