1

我正在尝试创建一个基于 noUiSilder 的 MaterialiseCSS 范围滑块。文档说：

为具有广泛范围的值添加范围滑块。这个设置为 0 到 100 之间的数字。我们有两种不同类型的滑块。nouiSlider 是我们修改的第 3 方插件。要使用 noUiSlider，您必须手动链接位于 extras 文件夹中的 nouislider.css 和 nouislider.js 文件。

不幸的是，我做了所有事情，它显示了默认的 HTML 范围（如链接中的那个）。

我的html：

<!DOCTYPE html>
<html>
    <head>
        <!--Import Google Icon Font-->
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <!--Import materialize.css-->
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
        <link href="extras/noUiSlider/nouislider.css" rel="stylesheet">
        <link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>




        <!--Import jQuery before materialize.js-->
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
        <script type="text/javascript" src="extras/noUiSlider/nouislider.min.js"></script>
        <script type="text/javasript" src="js/phonefinder.js"></script>
    </head>

    <body class="grey lighten-4">   
        <form>
            <div class="input-field">
                <p class="range-field">
                  <input type="range" id="test5" min="0" max="100" />
                </p>
            </div>
        </form>
    </body>
</html>

js/phonefinder.js：

$(function(){
var slider = document.getElementById('test5');
noUiSlider.create(slider, {
 start: [20, 80],
 connect: true,
 step: 1,
 range: {
   'min': 0,
   'max': 100
 },
 format: wNumb({
   decimals: 0
 })
});
});

我究竟做错了什么？

4

1 回答 1

3

noUiSlider 范围不是输入类型，它应该是 div。

所以：

    <form>
        <div class="input-field">
            <p class="range-field">
              <input type="range" id="test5" min="0" max="100" />
            </p>
        </div>
    </form>

应该：

    <form>
        <div id="connect"></div>
    </form>
于 2016-01-19T20:14:05.740 回答