Slider Changes Opacity of Box

Hi I’ve been strugling on how to achieve this simple question which I know how to solve it in python but I would like to implemented in javascript with Corvid, so here we go:

I would like to chnage dynamicaly the opacity of a box using a slider I 've configured with a range from 0-1 , the same that opacity property needs.

So here is my code, but is not working because the variable is not being read.

$w.onReady( function() {
let myValue = $w("#slider1").value;
} );

$w.onReady( function() {
 $w('#CoverAfter').style.backgroundColor = "rgba(0,0,0,myValue)";
} );

Thanks in advance!

Try:

$w.onReady( function() {
$w("#slider1").onChange( (event) => {
    let myValue = $w("#slider1").value;
    $w("#CoverAfter").style.backgroundColor = `rgba(0,0,0,${myValue})`;
})
})

It worked! Thank you so much J.D. =)

You’re welcome.

Trying to change container box opacity inside a repeater, at run time.
BackgroundColor changes, but opacity won’t.
Any suggestions?

Can you post your code?

  • make sure that in the editor at the box settings the opacity is set to 100%.

Thanks J.D.