noUiSlider не отображается на экране

Я использую Materialize CSS для создания формы и хотел бы использовать noUiSlider с двумя ручками, которые они имеют в качестве примера на своем сайте (http://materializecss.com/forms.html). Когда я добавляю include для noUiSlider (JS и CSS), а также код, который они имеют из примера, я не могу создать слайдер. Вот мой JS Fiddle:noUiSlider не отображается на экране

https://jsfiddle.net/omarrida/6zsbpwr4/

HTML:

<link href='https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/9.0.0/nouislider.min.css' rel="stylesheet"> 
<script src='https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/9.0.0/nouislider.js'></script> 

<div id="test5" class="noUiSlider" style="height: 50px; width: 100%;"></div>

JS:

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-11-08 Omar Rida

Где код JS помещен? –

Я не совсем уверен, что вы имеете в виду ... он помещен в раздел JS скрипки. –

Ваш скрипт runnin onLoad, так что это нормально, но если вы проверите консоль, вы увидите «Uncaught ReferenceError: wNumb не определено». Так что проблема связана с wNumb not noUiSlider – GillesC

Как отметил @GillesC, вопрос был с wNumb, а не с noUiSlider. Просто импортировав CDNJS для wNumb, проблема была решена. Вот новая скрипка, если кто-то заинтересован.

https://jsfiddle.net/omarrida/6zsbpwr4/2/

<script src='https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.0.4/wNumb.min.js'></script>

источник

2016-11-08 08:58:25

Исправлена проблема, спасибо! – TheoretiCAL

Приветствия! Рад, что смог помочь. –

noUiSlider не отображается на экране

ответ

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