无法使rangeslider.js正常工作

Question

我正在尝试使用rangeslider jQuery插件：http://andreruffert.github.io/rangeslider.js/

然而，它似乎无法正常工作。我做错了什么？

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

- user2806026

---

请在您的JSFiddle外部资源中使用此链接，而不是CDN集合链接。**已更正的fiddle** - Ramiz Wachtler

谢谢。我原本期望滑块的设计与这些示例相同：http://andreruffert.github.io/rangeslider.js/那只需要使用CSS样式吗？我以为这是默认设置，但似乎我无法使用CSS来定位手柄等内容。 - user2806026

Answer 1

实际答案取决于polyfill选项；

特性检测默认值为true。如果您想在支持本机<input type="range">元素的浏览器中使用polyfill，请将其设置为false。

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

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

- Luke Snowden

---

当我需要看到它的时候，这正是我需要看到的。 - manlikeangus

开发者应在他的文档中加入“polyfill: false”的注意事项。在此之前，我浪费了两个小时将HTML页面中的所有内容全部修复好，最终才找到这里。 - palerdot

告诉我关于这个的情况，这就是为什么我添加了答案。文档写得很差，很容易忽略它不起作用的原因。 - Luke Snowden

对我没用 - 我在屏幕上看到的只有这个“1” - <div class="range-output">1</div> - Reinderien

这是一个针对你自己的特定问题，创建一个新的问题并发送给我SO网址，我会帮你看看。 - Luke Snowden

Answer 2

我了解到的是，<input>还需要有属性[role="input-range"]才能正常工作。

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

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

- Mentori

Answer 3

请确保路径正确，将rangeslider.css添加到您的页面中，不要忘记js文件

- Keusta

Answer 4

对我也起作用，但只能在文档准备就绪时使用

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

- Cosmin Cojocaru

Answer 5

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

- ecklerpa