NoUiSlider无法正常工作

Question

我正在尝试设置noUiSlider。

我的HTML是

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

我的javascript

var slider = document.getElementById('slider');
    noUiSlider.create(slider, {
        start: 10,
        range: {
            min: 0,
            max: 100
        },
        pips: {
            mode: 'values',
            values: [20, 80],
            density: 4
        }
    });

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

这就是我的滑块的样子： javascript和css文件都已正确实现。

为什么它不起作用的任何想法？

更新：由于jsfiddle不起作用，这是一个CodePen示例：

http://codepen.io/anon/pen/oXVoyO

Answer 1

此插件不会设置这些值的样式。您需要将自定义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.
});

看到它正常工作：

http://codepen.io/anon/pen/gpEXQP