<div id="wrapper">
   
  <div class="img-container">
    <img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/rose-729509_1280.jpg" class="img" id="my-image">
  </div>
  
 <div class="controls">
   <h3 class="text"> Photo Editor</h3>
   
   <label class="label"> Opacity </label> <br>
   <input type="range" class="control" value="100" id="opacity"> <span id="op-value"> </span><br>
   
 <label class="label"> Contrast </label> <br>
   <input type="range" class="control" id="contrast" value="100" min="0" max="500"> <span id="contrast-value"> </span><br>
   
   
  <label class="label"> Brightness </label> <br>
   <input type="range" class="control" id="brightness" value="100" min="0" max="300"> <span id="b-value"> </span><br>
   
  <label class="label"> GrayScale</label> <br>
   <input type="range" class="control" id="gray-scale" value="0"> <span id="g-value"> </span><br>
   
  <label class="label"> Saturation </label> <br>
   <input type="range" class="control" id="saturation" value="100" min="0" max="300"> <span id="sat-value"> </span><br>
   
  <label class="label"> Blur </label> <br>
   <input type="range" class="control" id="blur" min="0" max="10" value="0"> <span id="blur-value"> </span><br>
   
  <label class="label"> Sepia </label> <br>
   <input type="range" class="control" id="sepia" value="0"> <span id="sepia-value"> </span><br>
 
   <button class="btn" id="reset"> Original Image</button>

   
 </div>
  
 
</div>
#wrapper{
  display: flex;
  height: 770px;
  width: 750px;
  background-color: #8AD1FA;
  justify-content: space-around;
}

.img-container{
  width: 550px;
  height: 700px;
  background-color:#D6EEFB;
  margin: 5px; 
}

.controls{
  width: 220px;
  height: 700px;
  background-color: #B8E4FC;
  margin: 5px; 
}
img.img{
  height: 500px;
  width: 540px;
  margin: 2px;
}

h3.text{
  color: #2D62C4;
  text-align: center;
  font-family: system-ui;
  font-size: 120%;
  text-shadow: 2px 1px 1px;
}
label.label{
  margin: 15px;
  font-family: system-ui;
  font-size: 100%;
  color: #244A90;
  
}

input.control{
  margin: 3px;
 
}

.btn{
  width: 150px;
  height: 35px;
  padding: 3px;
  margin: 10px;
  font-family: system-ui;
  background-color: #6AC4F1;
  border-radius: 10px; 
}

.btn:hover{
  opacity: 0.7;
  box-shadow: 5px 3px 2px #64C3F3;
  font-size: 125%;
}

let myImage = document.getElementById('my-image');

let opacity = document.getElementById('opacity');
let opValue = document.getElementById('op-value');

let contrast = document.getElementById('contrast');
let contrastValue = document.getElementById('contrast-value');

let brightness = document.getElementById('brightness');
let brightnessValue = document.getElementById('b-value');

let grayScale = document.getElementById('gray-scale');
let grayValue = document.getElementById('g-value')

let saturation = document.getElementById('saturation');
let saturationValue = document.getElementById('sat-value');

let blur = document.getElementById('blur');
let blurValue = document.getElementById('blur-value');

let sepia = document.getElementById('sepia');
let sepiaValue = document.getElementById('sepia-value');

let reset = document.getElementById('reset');








//Event Listeners

opacity.addEventListener('change', changeOpacity)

contrast.addEventListener('change', changeContrast);

brightness.addEventListener('change', changeBrightness);

grayScale.addEventListener('change', changeGray);

saturation.addEventListener('change', changeSaturation);

blur.addEventListener('change', changeBlur);

sepia.addEventListener('change', changeSepia);

reset.addEventListener('click', resetImage);




//Functions

function changeOpacity(){
  

myImage.style.filter = 'opacity(' + opacity.value + '%)' + 'contrast(' + contrast.value + '%)' + 'brightness(' + brightness.value + '%)' + 'grayscale(' + grayScale.value + '%)' + 'saturate('+ saturation.value + '%)'+ 'blur('+ blur.value + 'px)'+ 'sepia('+ sepia.value + '%)'; 
  
  opValue.textContent = opacity.value + ' %';
  
 
 contrastValue.textContent =  contrast.value + ' %';
  
brightnessValue.textContent = brightness.value + '%';

grayValue.textContent = grayScale.value + '%';
  
saturationValue.textContent = saturation.value + '%';

blurValue.textContent = blur.value + 'px';
  
 sepiaValue.textContent = sepia.value + '%';
  
}



function changeContrast(){
  
contrastValue.textContent = contrast.value + ' %'
  
 opValue.textContent = opacity.value + '%';
  
 grayValue.textContent = grayScale.value + '%';
  
brightnessValue.textContent = brightness.value + '%';
  
saturationValue.textContent = saturation.value + '%';
  
 blurValue.textContent = blur.value + 'px';
  
 sepiaValue.textContent = sepia.value + '%';
  
  myImage.style.filter= 'contrast('+ contrast.value +'%)' + 'opacity(' +opacity.value + '%)' + 'brightness('+ brightness.value + '%)' + 'grayscale('+ grayScale.value + '%)'+ 'saturate(' + saturation.value + '%)' + 'blur('+ blur.value + 'px)' + 'sepia('+ sepia.value + '%)';
}


function changeBrightness(){
  
brightnessValue.textContent = brightness.value + '%';
  
contrastValue.textContent = contrast.value + ' %'
  
opValue.textContent = opacity.value + '%';
  
grayValue.textContent = grayScale.value + 
'%';
  
saturationValue.textContent = saturation.value + '%';
  
blurValue.textContent = blur.value + 'px';
  
sepiaValue.textContent = sepia.value + '%';
  
myImage.style.filter = 'brightness(' + brightness.value + '%) ' + 'contrast(' + contrast.value + '%)'+ 'opacity(' + opacity.value + '%)' + 'grayscale(' + grayScale.value + '%)' + 'saturate(' + saturation.value + '%)' + 'blur('+ blur.value + 'px)'+ 'sepia('+ sepia.value + '%)';
  
}

function changeGray(){
  grayValue.textContent = grayScale.value + '%';
  
 opValue.textContent = opacity.value + '%';
  
contrastValue.textContent = contrast.value + ' %'
  
brightnessValue.textContent = brightness.value + '%';
  
saturationValue.textContent = saturation.value + '%';
  
 blurValue.textContent = blur.value + 'px';
 
 sepiaValue.textContent = sepia.value + '%';
  
 myImage.style.filter = 'grayscale('+ grayScale.value + '%)' + 'opacity(' + opacity.value + '%)' + 'contrast('+ contrast.value + '%)'+ 'brightness(' + brightness.value + '%)'+ 'saturate('+ saturation.value + '%)' + 'blur(' + blur.value + 'px)'+ 'sepia(' + sepia.value + '%)';
 
  
}


function changeSaturation(){
 
  saturationValue.textContent = saturation.value + '%';
  
 grayValue.textContent = grayScale.value + '%';
  
 opValue.textContent = opacity.value + '%';
  
contrastValue.textContent = contrast.value + ' %'
  
brightnessValue.textContent = brightness.value + '%';
  
blurValue.textContent = blur.value + 'px';
  
sepiaValue.textContent = sepia.value + '%';
  
  myImage.style.filter = 'saturate('+ saturation.value + '%)' + 'opacity('+ opacity.value + '%)' + 'contrast(' + contrast.value + '%)' + 'brightness(' + brightness.value + '%)' + 'grayscale(' + grayScale.value + '%)'+ 'blur(' + blur.value + 'px)' +'sepia('+ sepia.value + '%)';  

}

function changeBlur(){
  
  blurValue.textContent = blur.value + 'px';
  
    saturationValue.textContent = saturation.value + '%';
  
 grayValue.textContent = grayScale.value + '%';
  
 opValue.textContent = opacity.value + '%';
  
contrastValue.textContent = contrast.value + ' %'
  
brightnessValue.textContent = brightness.value + '%';
  
sepiaValue.textContent = sepia.value + '%';
  
myImage.style.filter = 'blur(' + blur.value + 'px)' + 'opacity('+ opacity.value + '%)'+ 'contrast('+ contrast.value + '%)' + 'brightness('+ brightness.value + '%)' + 'saturate('+ saturation.value + '%)' + 'grayscale('+ grayScale.value + '%)'+ 'sepia(' + sepia.value + '%)';
  
}


function changeSepia(){
  
  sepiaValue.textContent = sepia.value + '%';
  
   blurValue.textContent = blur.value + 'px';
  
    saturationValue.textContent = saturation.value + '%';
  
 grayValue.textContent = grayScale.value + '%';
  
 opValue.textContent = opacity.value + '%';
  
contrastValue.textContent = contrast.value + ' %'
  
brightnessValue.textContent = brightness.value + '%';
  
  myImage.style.filter = 'sepia('+ sepia.value + '%)' + 'opacity('+ opacity.value + '%)' + 'contrast('+ contrast.value + '%)' + 'brightness('+ brightness.value + '%)' + 'grayscale('+ grayScale.value + '%)' + 'saturate('+ saturation.value + '%)' + 'blur(' + blur.value + 'px)';
}

//Reset Image
function resetImage(){
  myImage.style.filter = 'none';
  
  opacity.value = 100;
  contrast.value = 100;
  brightness.value = 100;
  grayScale.value = 0;
  saturation.value = 100;
  blur.value = 0;
  sepia.value = 0;
 
  
  // Displaying the Original Values
  
  opValue.textContent = opacity.value + '%';
  
   sepiaValue.textContent = sepia.value + '%';
  
   blurValue.textContent = blur.value + 'px';
  
    saturationValue.textContent = saturation.value + '%';
  
 grayValue.textContent = grayScale.value + '%';
  
  contrastValue.textContent = contrast.value + ' %'
  
brightnessValue.textContent = brightness.value + '%';
    
}











External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.