JSFiddle - React, Tailwind, and code Playground

by Erangur

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<input class="gwd-input-13xh" type="range" min="0" max="50" value="25" id="slider">

<div>
<img id="img_1" class="img_1">
<img id="img_2" class="img_2">
</div>

CSS

.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;
 }
input{
  position: absolute;
  top: 200px;
  }
}

JavaScript

$("#slider").change(function(){
	var img_1 = document.getElementById("img_1");
  var img_2 = document.getElementById("img_2");
  var sliderPercentage = ($(this).val() / $(this).attr('max')).toFixed(2);
  img_1.style.opacity = 1 - sliderPercentage

setBlur(img_1, (10 * sliderPercentage).toFixed(2));
  img_2.style.opacity = sliderPercentage;
  setBlur(img_2, 10 - (10 * sliderPercentage).toFixed(2));

});

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