noUiSlider没有出现在屏幕上

我正在使用Materialise CSS来构建表单，并且希望在他们的网站（http://materializecss.com/forms.html）上使用带有两个手柄的noUiSlider作为示例。当我添加包含noUiSlider（JS和CSS）以及它们在示例中的代码时，我无法生成滑块。这里是我的JS小提琴：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 is not defined'所以问题是wNumb不是noiiSlider – GillesC

正如@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>

来源

2016-11-08 08:58:25

解决了我的问题，谢谢！ – TheoretiCAL

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

noUiSlider没有出现在屏幕上

回答

相关问题