Question

我使用Materialise 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
   })
  });

我已经和它搏斗了一段时间，所以任何帮助都会非常感激。

Answer 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>

noUiSlider未出现在屏幕上

1 个答案: