noUiSlider 没有出现在屏幕上答案

【问题标题】：noUiSlider does not appear on screennoUiSlider 没有出现在屏幕上
【发布时间】：2016-11-08 16:58:25
【问题描述】：

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

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

我已经为此苦苦挣扎了一段时间，因此我们将不胜感激。

【问题讨论】：

js代码放在哪里？
我不确定你的意思……它放在 Fiddle 的 JS 部分。
您的脚本在 onLoad 运行，所以没问题，但是如果您检查控制台，您会看到 Uncaught ReferenceError: wNumb is not defined 所以问题出在 wNumb 而不是 noUiSlider
是的，请注意，在控制台中，控制台是您的朋友。
哇。我刚刚为 wNumb 和 tada 导入了 CDNJS - 它有效。我是否遗漏了 noUiSlider 文档中需要导入 wNumb 的内容？

标签： javascript html nouislider

【解决方案1】：

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

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

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

【讨论】：

干杯！很高兴我能帮上忙。