<div id="main"> 
  
  <div class="img-container">
    <img src="https://cdn.pixabay.com/photo/2016/10/18/21/22/crater-lake-1751456_1280.jpg" class="img" id="my-image">
    
  </div>
  
  <div class="btn-container">
    <label class="label"> Blur Image</label> <br>
    <input type="range" id="blur" class="control" min="0" max="10" value="0">
    <span id="blur-content"> </span> 
  </div>
  
  
</div>
#main{
  width: 780px;
  height: 600px;
  background-color:#BB90F2;
  display: flex;
  justify-content: space-around;
}

.img-container{
  width: 550px;
  height: 585px; 
  background-color:#BAAECA;
  margin: 10px;
}

.btn-container{
  width: 200px;
  height: 585px;
  background-color: #EEE5F9;
  margin: 5px;
}

img.img{
  height: 565px;
  width: 545px;
  margin: 5px;  
}


label.label{
  color: blue;
  font-size: 15px;
  font-family:system-ui;
  padding: 55px;
  
}
.control{
  margin: 3px;
  
}
let myImage = document.getElementById('my-image');
let blur= document.getElementById('blur');

let blurContent = document.getElementById('blur-content');

blur.addEventListener('change', changeBlur);

function changeBlur(){
  blurContent.textContent = 'Blur ' +       blur.value  + 'px'; 
  
  myImage.style.filter = 'blur('+ blur.value + 'px)';
 
}







External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.