NoUislider change opacity on block element

Question

I want to change the opacity of a div or image by using noUiSlider, but it won't display the block. What am I missing?

var opacitySlider = document.getElementById("slider");

        noUiSlider.create(opacitySlider, {
            behaviour: 'drag', 
            start: 0,
            range: {
                min: 0,
                max: 1
                }
            });  
            
        var o = opacitySlider.noUiSlider.get();
            
        var changeOp =
            document.getElementById("block").style.opacity = o ;

Any help or advice would be great. Fiddle here.

Answer 1

Move your opacity assignment into the update method:

opacitySlider.noUiSlider.on('update', function( values, handle ){
    document.getElementById("block").style.opacity = values[handle] ;
    directionField.innerHTML = values[handle];
});

You were calling it just once, on page load.