NoUislider 改变块元素的不透明度

Question

我想使用 noUiSlider 更改 div 或图像的不透明度，但它不会显示块。我错过了什么？

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 ;

任何帮助或建议都会很棒。 Fiddle here.

Answer 1

将您的不透明度分配移动到更新方法中：

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

您只在页面加载时调用了一次。

NoUislider 改变块元素的不透明度

NoUislider change opacity on block element

javascript

opacity

nouislider