Can't get rangeslider.js to work

The actual answer is down to the polyfill option;

Feature detection the default is true. Set this to false 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});

It worked for me also, but only on document ready

 $(document).ready(function() {        $('[role="range"]').rangeslider({            polyfill : false,            onInit : function() {                this.output = $( '[role="input-range"]' ).html( this.$element.val() );            },            onSlide : function( position, value ) {                this.output.html( value );            }        });    });