MaterialiseCSS noUiSlider范围不起作用

我试图创建一个基于noUiSilder的MaterialiseCSS范围滑块。 documentation说：MaterialiseCSS noUiSlider范围不起作用

为宽范围的值添加范围滑块。这个被设置为0到100之间的数字。我们有两种不同类型的滑块。 nouiSlider是我们修改过的第三方插件。要使用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 
}) 
}); 
});

我在做什么错？

来源

2016-01-17 Robin Dijkhof

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-19 20:14:05

MaterialiseCSS noUiSlider范围不起作用

回答

相关问题