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 правильно реализованы.

Любые идеи, почему это не работает?

UPDATE: Как 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