Nappstir Nappstir - 5 months ago 20
Javascript Question

HTML5 input type="range" image opacity

I currently have two images and an input:

<input type="range" min="0" max="50" value="25">

.image_1 {
filter: blur(5px);
opacity: .8;
}

.image_2 {
filter: blur(5px);
opacity: .8;
}


The goal is when slider moves right
image_2 {filter: blur(0px); opacity: 1;
comes into focus and opacity full; meanwhile
image_1 {opacity: 0}
goes away. Vice versa should happen when the slider is moved to the left.

Any ideas or suggestions are greatly appreciated.

Thank you so far for all your suggestions and answers. I have yet to fully answer my question with provided solutions but I have gotten closer. What I have done is I have added
oninput=showVal(this.value)
to my
input
element. I have then created a function:

function showVal(newVal) {
var img_1 = document.getElementById("img_1");
var img_2 = document.getElementById("img_2");

// code to change blur upon value of slider changing (img_1.style.etc)
// unsure how to do
console.log(newVal);
}


Due to all the great answers, I think I have found a solution. However, I am still having an issue with adjusting the opacity. Here is the current open question about it: Google Web Designer dynamically adjust opacity in source code.

Answer

Done. There is no real way to do this with only CSS as you probably already noticed. You could also send the max blur from the dom as another function parameter to make the code more modular. Also don't forget to add all the filter implementations (I only added webkit's because of time) and watch out for IE10 since onchange might have some issues. See this answer for a fallback


EDIT: added cross browser filter setting compatibility

var config = {
  img1: document.querySelector('.image_1'),
  img2: document.querySelector('.image_2'),
  maxBlurPx: 10
}

function getInput(value, max) {
  var sliderPercentage = (value / max).toFixed(2);
  config.img1.style.opacity = 1 - sliderPercentage;
  setBlur(config.img1, (10*sliderPercentage).toFixed(2));
  config.img2.style.opacity = sliderPercentage;
  setBlur(config.img2, 10-(10*sliderPercentage).toFixed(2));
  config.img2.style.webkitFilter = "blur(" + (10 - (10 * sliderPercentage).toFixed(1)) + "px)";
}

function setBlur(el, value) {
  if (el.style.hasOwnProperty('filter'))
    el.style.filter = "blur("+value+"px)";
  if (el.style.hasOwnProperty('webkitFilter'))
    el.style.webkitFilter = "blur("+value+"px)";
  if (el.style.hasOwnProperty('mozFilter'))
    el.style.mozFilter = "blur("+value+"px)";
  if (el.style.hasOwnProperty('oFilter'))
    el.style.oFilter = "blur("+value+"px)";
  if (el.style.hasOwnProperty('msFilter'))
    el.style.msFilter = "blur("+value+"px)";
}
.image_1,
.image_2 {
  width: 150px;
}
.image_1 {
  filter: blur(5px);
  opacity: .8;
}
.image_2 {
  filter: blur(5px);
  opacity: .8;
}
<input type="range" min="0" max="50" value="25" oninput="getInput(this.value, this.max)">
<br />
<img src="http://www.istockphoto.com/resources/images/HomePage/Tiles/EN_US/EN_US_2016_05/EssentialBackgrounds79139997.jpg" alt="" class="image_1" />
<img src="http://www.istockphoto.com/resources/images/HomePage/Tiles/EN_US/EN_US_2016_05/EssentialBackgrounds79139997.jpg" alt="" class="image_2" />

Comments