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 正是来自网站的代码(示例页面，最后一个示例)。

这就是我的 slider 的样子: javascript 和 css 文件均已正确实现。

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

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

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

Answer 1

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

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

使用此规则，您可以在 slider 位置的底部获得 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