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範圍不起作用

回答

相關問題