Question

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

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

我很遗憾，它显示了defaut 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
 })
});
});

我做错了什么？

Answer 1

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

所以：

    <form>
        <div id="connect"></div>
    </form>

应该是：

post()

MaterialiseCSS noUiSlider范围不起作用

1 个答案: