Javascript NoUiSlider工作不正常

我在试着建立noUiSlider

我的html是

<div id="slider" class"noUiSlider"></div>

javascript就是网站上的代码（示例页面，最后一个示例）

这就是我的滑块的外观： javascript和css文件都已正确实现

你知道为什么它不起作用吗

更新：由于JSFIDLE不起作用，下面是一个代码笔示例：

---

此插件不设置这些值的样式。您需要将自定义CSS应用于元素：

.noUi-value.noUi-value-horizontal.noUi-value-large {
     position: absolute;
 }

使用此规则，在滑块位置的底部有20%和80%的值。如果您想进行更多的样式化，则需要将自定义CSS应用于此元素，或将元素附加到插件的

update（）

函数：

slider.noUiSlider.on('update', function( values, handle ) {
   //on slide you can update values and items.
});

看到它工作了吗

---

连接一个JSFIDLE。如果代码与示例完全相同，那么您就有了覆盖样式的任何内容。请，制作一个jsfiddle.net并共享usjsfiddle不起作用，我把它放在了代码笔中。我更新了问题，问题是什么？值的可视化还是在幻灯片中尝试更新值？这是可视化。这一页应该是这样的：（最后一个例子）谢谢。但这很奇怪。我以为它会自动设计样式。但我注意到另一个问题：20%和80%应该是边界。您应该无法达到例如10%的目标。这意味着，脚本无法正常工作。您现在看到的值是要在滑块中查看这些值的位置。这个插件工作得很好。如果需要更新值，则需要使用第二块代码。当用户滑动滑块时，您必须更新值。哦，没有看到。在您告诉我的示例中，如果您看到“非线性滑块”示例，您可以查看以下代码：

nonLinearSlider.noUiSlider.on（'update'，function（values，handle）{if（！handle）{lowerValue.innerHTML=values[handle]+，'+leftValue（handles[handle]）；}else{upperValue.innerHTML=values[handle]“+”，“+leftValue（句柄[handle]）；}）要更新这些值。（此处：）
slider.noUiSlider.on('update', function( values, handle ) {
   //on slide you can update values and items.
});