Kann nicht bekommen rangeslider.js

Question

ich arbeiten ist versucht, die rangeslider jQuery-Plugin zu verwenden: http://andreruffert.github.io/rangeslider.js/

aber es scheint nicht zu funktionieren. Was mache ich falsch?

<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/

Answer 1

Die eigentliche Antwort ist bis auf die polyfill Option;

Merkmalserkennung Der Standardwert ist true. Setzen Sie diesen Wert auf false, wenn Sie das Polyfill auch in Browsern verwenden möchten, die das native < input type = "range" > Element unterstützen.

Heres eine einfache Möglichkeit, um loszulegen:

$('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); 
    } 
}); 

Answer 2

Es funktionierte für mich auch, aber nur auf dem Dokument bereit

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