HTML5 input type=“range” image opacity

Question

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; 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 1

Update

If you have two images, and want to change the opacity, you can still listen for the change event.

The first image's opacity value will be the value of the range input divided by its maximum value. The second image's opacity value will be the difference between the maximum and current value divided by the maximum value.

In other words, one image will become more transparent, and the other will become more opaque.

 var range = document.getElementById("range"); var imgOne = document.getElementsByClassName("img1")[0]; var imgTwo = document.getElementsByClassName("img2")[0]; range.addEventListener("change", function() { imgOne.style.opacity = this.value / this.max; imgTwo.style.opacity = (this.max - this.value) / this.max; }); 

 .img1, .img2 { opacity: 0.5; } 

 <input id="range" type="range" min="0" max="50" value="25"><br><br> <img class="img1" height="200" width="200" src="http://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-11.jpg" /> <img class="img2" height="200" width="200" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLg8Fo8YK5SNLqmZUUCjaUh_2Y57jxBgkmjOwxj7dNSui2jZcb" /> 

Answer 2

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" /> 

Answer 3

Try this snippet. I used this code on my website http://stark-cove-24150.herokuapp.com

$(document).ready(function(){
 $("#designer").mouseenter(function(){
     $("#xyz").attr("src", "design.jpg");
     $("#face").css("background-image", "url(des2.jpg)");
     $("#coder").css("opacity", "0.5");
 });
$("#designer").mouseleave(function(){
     $("#xyz").attr("src", "def.jpg");
     $("#coder").css("opacity", "");
 });
 $("#coder").mouseenter(function(){
     $("#xyz").attr("src", "cp2.jpg");
      $("#designer").css("opacity", "0.5");
      $("#face").css("background-image", "url(coding.jpg)");
 });
$("#coder").mouseleave(function(){
     $("#xyz").attr("src", "def.jpg");
     $("#face").css("background-image", "url()");
     $("#designer").css("opacity", "");
 });
 });

Answer 4

You can create objects where properties, values correspond to current value of input element

 var imgs = $(".image_1, .image_2"), i = { "0.4": .6, "0.3": .7, "0.2": .8, "0.1": .9, "0": 1, "0.6": .4, "0.7": .3, "0.8": .2, "0.9": .1, "1": 0 }, blur = { "0.5": "5px", "0.6": "4px", "0.7": "3px", "0.8": "2px", "0.9": "1px", "1": "0px", "0.4": "4px", "0.3": "3px", "0.2": "2px", "0.1": "1px", "0": "0px" }; $("input[type=range]").change(function() { var n = this.value; if (n == .5) { imgs.css({ "-webkit-filter": "blur(" + blur[n] + ")", "-moz-filter": "blur(" + blur[n] + ")", "filter": "blur(" + blur[n] + ")" }) }; if (n > .5) { imgs.eq(1).css({ "opacity": n, "-webkit-filter": "blur(" + blur[n] + ")", "-moz-filter": "blur(" + blur[n] + ")", "filter": "blur(" + blur[n] + ")" }); imgs.eq(0).css({ "opacity": i[n] }); } else { if (n < .5) { imgs.eq(1).css({ "opacity": n }); imgs.eq(0).css({ "opacity": i[n], "-webkit-filter": "blur(" + blur[n] + ")", "-moz-filter": "blur(" + blur[n] + ")", "filter": "blur(" + blur[n] + ")" }) } } }).focus() 

 img { transition: all .01s linear; } .image_1 { -webkit-filter: blur(5px); -moz-filter: blur(5px); filter: blur(5px); opacity: .5; } .image_2 { -webkit-filter: blur(5px); -moz-filter: blur(5px); filter: blur(5px); opacity: .5; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="range" step=".1" min="0" max="1" value=".5"> <img src="http://lorempixel.com/100/100/technics" class="image_1" /> <img src="http://lorempixel.com/100/100/nature" class="image_2" /> 

Answer 5

var val=25;
$("input[type='range']").change(function(){
  if($(this).val()>val){
    $(".image_2").css({
      "filter":"blur(0px)",
      "opacity":"1"
    });
    $(".image_1").css({
      "opacity":"0"
    });
  } else {
    $(".image_1").css({
      "filter":"blur(0px)",
      "opacity":"1"
    });
    $(".image_2").css({
      "opacity":"0"
    });
  }
  val=$(this).val();
});

I havent checked this code yet so im not sure if this will work..

Answer 6

here is another example http://codepen.io/mozzi/pen/qNqJXe

<input id="slider" type="range" min="0" max="50" value="25">
<img id="img1" src="http://www.pd4pic.com/images/number-1-red-circle.png" alt="Smiley face" height="200" width="200">
<img id="img2" src="http://images.clipartpanda.com/numbers-clipart-1-10-4cb4KkKgi.png" alt="Smiley face" height="200" width="200">



  $("#img1").fadeTo(0,0.5);
  $("#img2").fadeTo(0,0.5 ) ;

$("#slider").change(function() {
  var rangeVal = $("#slider").val();
  var val1 = (rangeVal/50);
  var val2 = ((50-rangeVal)/50);
  $("#img1").fadeTo(0,val1);
  $("#img2").fadeTo(0,val2 ) ;
});