NoUiSlider does not work properly

Question

I'm trying to set up noUiSlider.

My html is

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

My javascript

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

The javascript is exactly the code from the website (examples page, last example).

That's how my slider looks like: Both javascript and css files are correctly implemented.

Any ideas why it's not working?

UPDATE: As jsfiddle didn't work, here is a CodePen example:

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

Answer 1

This plugin doesn't styling these values. You need to apply custom CSS to the elements:

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

With this rule, you have the 20% and 80% values in bottom of their position in slider. If you want to stylize much more, you need to apply custom CSS to this elements, or attach elements to update() function of the plugin:

slider.noUiSlider.on('update', function( values, handle ) {
   //on slide you can update values and items.
});

See it working:

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