Javascript Can'；t让rangeslider.js正常工作

我正在尝试使用RangeSloider jQuery插件：

然而，它似乎不起作用。我做错了什么

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

$（文档）.ready（函数（）{
$（'input[type=“range”]”）。RangeSloider（）；
});

---

jshiddle:

实际答案取决于polyfill选项

功能检测默认值为

true

。如果出现以下情况，则将其设置为

false

您希望在支持的浏览器中也使用polyfill 原生元素

以下是一个简单的入门方法：

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

$（'input[type=“range”]”）。范围滑块({
polyfill:false，
onInit:function（）{
this.output=$（''）.insertAfter（this.$range.html（this.$element.val（））；
},
onSlide：函数（位置、值）{
this.output.html（值）；
}
});

它对我也有效，但只适用于文档准备

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

---

我学到的是，

还需要有属性

[role=“input range”]

，才能工作：

<input type="range" min="1" max="100" value="10" role="input-range">

$('input[type="range"]').rangeslider({
  polyfill: false
});

$（'input[type=“range”]”）。范围滑块({
polyfill:错误
});

$（'input[type=“range”]”）。范围滑块({
polyfill:false，
onInit:function（）{
this.output=$（''）.insertAfter（this.$range.html（this.$element.val（））；
},
onSlide：函数（位置、值）{
this.output.html（值）；
}
});

确保js文件的路径正确，不要忘记在页面中添加RangeSloider.css

使用JSFIDLE外部资源中的CDN集合，谢谢。我希望滑块的设计与示例相同：那就是css样式吗？我认为这是默认设置，而且似乎我无法使用css锁定句柄和内容。这正是我需要查看的内容。开发人员应该在文档中添加

polyfill:false

gotcha。在这里结束之前，我只花了2个小时修复html页面中的所有内容。请告诉我，这就是我添加答案的原因。这些文档写得很差，很容易错过它不起作用的原因。我不起作用-我在屏幕上看到的只是这个“1”-

1

这是你自己的问题。那么，创建一个新问题，并将SO url发送给我，我来看看

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