javascript - 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