Can't get rangeslider.js to work

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/

Answers


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 );
            }
        });
    });

Need Your Help

How can I highlight the table row on click ?

android highlight android-tablelayout

As my project requirement i have to highlight the table row on onClick. There is any way to do this? Or please suggest me the alternative?

CAML query for boolean column is not working

c# sharepoint caml

Hi I have a SharePoint list to be queried for my Desktop App and I want to retrieve only the Active Members but when I queried I got only the users who aren't active. What is wrong with my CAML que...