javascript - noUiSlider does not appear on screen -
i'm using materialize css build form , use nouislider 2 handles have example on website (http://materializecss.com/forms.html). when add includes nouislider (js , css) code have example, unable produce slider. here's 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 }) });
i've been wrestling while appreciated.
as @gillesc noted, issue wnumb , not nouislider. importing cdnjs wnumb, issue resolved. here new fiddle if interested.
https://jsfiddle.net/omarrida/6zsbpwr4/2/
<script src='https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.0.4/wnumb.min.js'></script>
Comments
Post a Comment