Adjust two css properties at the same time.

[trsieb...@gmail.com]

Currently I have an two images and a slider:

input class="gwd-input-13xh" type="range" min="0" max="50" value="25" id="slider" oninput="getInput(this.value, this.max)">

.img_1 {
position: absolute;
width: 180px;
height: 130px;
left: 62px;
top: 1px;
-webkit-filter: blur(5px);
opacity: .8;
}

.img_2 {
position: absolute;
width: 180px;
height: 130px;
left: 62px;
top: 1px;
-webkit-filter: blur(5px);
opacity: .8;
}

What I am trying to do is adjust the opacity and the filter at the same time depending on the slide. Here is the code that I have to perform said function:

function getInput(value, max) {
var img_1 = document.getElementById("img_1");
var img_2 = document.getElementById("img_2");
var sliderPercentage = (value / max).toFixed(2);
setOpacity(img_1, (1 - sliderPercentage));
setBlur(img_1, (10 * sliderPercentage).toFixed(2));
setOpacity(img_2, sliderPercentage);
setBlur(img_2, 10 - (10 * sliderPercentage).toFixed(2));
}

function setOpacity(ele, value) {
return ele.style.opacity = value;
}

function setBlur(ele, value) {
ele.setAttribute("style", "-webkit-filter:blur(" + value + "px)")
}

This code works great, although what happens is that when I use the `setBlur` function, it overrides the `setOpacity` function. When I remove the `setBlur` function the `setOpacity` function works.

[Jeremy (GWD Engineer)]

For reference: the question was also posted on Stack Overflow, where user myf provided the correct solution:

I assume the problem is you are re-assigning the whole style attribute, so later alteration overrides the former. Replacing ele.setAttribute("style", "...") with

ele.style["-webkit-filter"] = "blur(" + value + "px)";

should fix your issue.

This is part of what GWD does internally when you select the "Set Styles" option in the Events UI.