MaterializeCSS noUiSlider диапазон не работает

Я пытаюсь создать слайдер диапазона MaterialiseCSS, основанный на noUiSilder. documentation говорит:MaterializeCSS noUiSlider диапазон не работает

Добавить ползунок диапазона для значений с широким диапазоном. Этот номер установлен в число от 0 до 100. У нас есть два разных типа ползунков. nouiSlider - это сторонний плагин, который мы изменили. Чтобы использовать noUiSlider, вам необходимо вручную связать файлы 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 
}) 
}); 
});

Что я делаю неправильно?

источник

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

MaterializeCSS noUiSlider диапазон не работает

ответ

Смежные вопросы