javascript 无法让rangeslider.js 工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34015785/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can't get rangeslider.js to work
提问by user2806026
I am trying to use the rangeslider jQuery plugin: http://andreruffert.github.io/rangeslider.js/
我正在尝试使用 Rangeslider jQuery 插件：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/
jsfiddle：http: //jsfiddle.net/8n2ckkmr/
回答by Luke Snowden
The actual answer is down to the polyfill option;
实际答案取决于 polyfill 选项；
Feature detection the default is
true. Set this tofalseif you want to use the polyfill also in Browsers which support the native <input type="range"> element.
特征检测默认为
true.false如果您还想在支持本机 <input type="range"> 元素的浏览器中使用 polyfill ，请将其设置为。
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 );
}
});
回答by Mentori
What have I learned is that <input>needs to have also attribute [role="input-range"]for this to work:
我学到的是，还<input>需要有属性[role="input-range"]才能使其工作：
<input type="range" min="1" max="100" value="10" role="input-range">
$('input[type="range"]').rangeslider({
polyfill: false
});
回答by ecklerpa
<input type="range" min="10" max="1000" step="10" value="300" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/js/rangeslider.js" asp-append-version="true"></script>
<script>
$('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);
}
});</script>
回答by Keusta
make sure to have the correct path to the js files and dont forget to add rangeslider.css within your page
确保 js 文件的路径正确，并且不要忘记在页面中添加 Rangeslider.css
回答by Cosmin Cojocaru
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 );
}
});
});
