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

NoUiSlider 无法正常工作

NoUiSlider does not work properly

html

javascript

nouislider