无法让 rangeslider.js 工作

Posted 2023-02-18

【中文标题】无法让 rangeslider.js 工作

【英文标题】：Can't get rangeslider.js to work

【发布时间】：2016-03-05 02:28:31

【问题描述】：

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

【问题讨论】：

在您的 JSFiddle 外部资源中使用 this link 而不是 CDN 集合 link corrected fiddle

谢谢。我期待滑块具有与示例相同的设计：andreruffert.github.io/rangeslider.js 那只是 css 样式吗？以为这是默认设置，似乎我无法使用 css 定位句柄和东西..

【参考方案1】：

实际答案取决于 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 );
    
);

【讨论】：

正是我需要看的时候看到的。

开发者应该在他的文档中添加polyfill: false gotcha。我只是浪费了 2 个小时来修复 html 页面中的所有内容，然后才到这里结束。

告诉我，这就是我添加答案的原因。文档写得不好，很容易错过它不起作用的原因

对我不起作用 - 我在屏幕上看到的只是这个“1” - <div class="range-output">1</div>

这是一个你自己的特定问题，创建一个新问题并将 SO url 发送给我，我看看

【参考方案2】：

我学到的是 <input> 还需要有属性 [role="input-range"] 才能工作：

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

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

【参考方案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 );
            
        );
    );

【参考方案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>

【参考方案5】：

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