I am trying to use the rangeslider jQuery plugin: http://andreruffert.github.io/rangeslider.js/
However, it doesn't seem to work. What am I doing wrong?
<input
type="range"
min="10" // default 0
max="1000" // default 100
step="10" // default 1
value="300" // default min + (max-min)/2
data-orientation="vertical" // default horizontal
>
$( document ).ready(function() {
$('input[type="range"]').rangeslider();
});
Jsfiddle: http://jsfiddle.net/8n2ckkmr/
The actual answer is down to the polyfill option;
Feature detection the default is
true
. Set this tofalse
if you want to use the polyfill also in Browsers which support the native <input type="range"> element.
Heres an easy way to get started:
$('input[type="range"]').rangeslider({
polyfill : false,
onInit : function() {
this.output = $( '<div class="range-output" />' ).insertAfter( this.$range ).html( this.$element.val() );
},
onSlide : function( position, value ) {
this.output.html( value );
}
});
What have I learned is that <input>
needs to have also attribute [role="input-range"]
for this to work:
<input type="range" min="1" max="100" value="10" role="input-range">
$('input[type="range"]').rangeslider({
polyfill: false
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With