MaterializeCSS noUiSlider 范围不工作

Question

我正在尝试创建一个基于 noUiSilder 的 MaterialiseCSS 范围滑块。 documentation 表示：

Add a range slider for values with a wide range. This one is set to be a number between 0 and 100. We have two different types of sliders. nouiSlider is a 3rd party plugin which we've modified. To use the noUiSlider, you will have to manually link the nouislider.css and nouislider.js files located in the extras folder.

不幸的是，我做了每一件事，它显示了默认的 HTML 范围（就像 link 中的那个）。

我的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
 })
});
});

我做错了什么？

Answer 1

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>

MaterializeCSS noUiSlider 范围不工作

MaterializeCSS noUiSlider range not working

materialize

nouislider