Question

我正在尝试使用rangelider 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/

Answer 1

实际答案取决于polyfill选项;

功能检测默认为true。将其设置为false if 你想在支持的浏览器中使用polyfill native＆lt; input type =“range”＆gt;元件。

这是一个简单的入门方式：

$('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

我了解到，<input type="range" min="1" max="100" value="10" role="input-range"> $('input[type="range"]').rangeslider({ polyfill: false });还需要具有属性?才能起作用：

 @GET("my_service")
 Call<List<Employees>> GetEmployees(@Query("CityId")  String CityId);

Answer 3

它也适用于我，但仅适用于文档准备

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

Answer 4

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

Answer 5

确保具有js文件的正确路径，并且不要忘记在页面内添加rangelider.css

无法使rangelider.js工作

5 个答案: