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沒有出現在屏幕上

回答

相關問題