noUiSlider 没有出现在屏幕上

Question

我正在使用 Materialize CSS 构建一个表单，并希望使用带有两个句柄的 noUiSlider，他们在他们的网站 (http://materializecss.com/forms.html) 上有一个示例。当我添加 noUiSlider（JS 和 CSS）的包含以及示例中的代码时，我无法生成滑块。这是我的 JS Fiddle:

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
   })
  });

我已经为此苦苦思索了一段时间，非常感谢您的帮助。

Answer 1

正如@GillesC 指出的那样，问题出在 wNumb 而不是 noUiSlider。通过简单地为 wNumb 导入 CDNJS，问题就解决了。如果有人感兴趣，这是新的fiddle。

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

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

noUiSlider 没有出现在屏幕上

noUiSlider does not appear on screen

html

javascript

nouislider