Rangeslider.js | 未捕获的TypeError:无法读取未定义的属性"0"

jos*_*non 9 javascript jquery html5 input rangeslider

我正在尝试使用rangeslider.js

这是我的HTML包括:

<script type="text/javascript" src="jquery/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="rangeslider.js-2.1.1/rangeslider.min.js"></script>
Run Code Online (Sandbox Code Playgroud)

这是我的HTML:

<input type="range" min="0.0" max="1.0" step="0.05" value="0.8" data-rangeslider="" style="position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0;">

<script>
    // Initialize a new plugin instance for all
    // e.g. $('input[type="range"]') elements.
    $('input[type="range"]').rangeslider();

    // Destroy all plugin instances created from the
    // e.g. $('input[type="range"]') elements.
    $('input[type="range"]').rangeslider('destroy');

    // Update all rangeslider instances for all
    // e.g. $('input[type="range"]') elements.
    // Usefull if you changed some attributes e.g. `min` or `max` etc.
    $('input[type="range"]').rangeslider('update', true);
</script>
Run Code Online (Sandbox Code Playgroud)

我收到此错误:

Uncaught TypeError: Cannot read property '0' of undefined.
Run Code Online (Sandbox Code Playgroud)

这些是似乎引用的行rangeslider.min.js:

line 169: this.handleDimension = g(this.$handle[0], "offset" + i(this.DIMENSION)),

line 272: "string" == typeof b && e[b].apply(e, c)
Run Code Online (Sandbox Code Playgroud)

我不确定我造成了什么类型的错误?

J3s*_*oon 6

你需要包含css文件rangeslider.js,你不应该销毁rangelider.

对于最小的例子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.css">
</head>
<body>
    <input type="range" min="10" max="1000" step="10" value="300">
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.js"></script>
    <script>
       $('input[type="range"]').rangeslider({polyfill: false});
    </script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

上面的示例基于rangeslider.js中的代码.

我认为rangeslider.js中Usage部分只是一个脚本展示.因此,如果我们直接使用这些脚本,则会发生以下错误:

chrome中的错误消息:

未捕获的TypeError:无法读取未定义的属性"0"

Firefox中的错误消息:

TypeError:this.$ handle未定义