<div class="image-compare">
  <img class="image-1" src="https://assets.codepen.io/592829/example-image.svg" alt="A friendly illustrated cloud character with eyes on a red-pink background.">
  <img class="image-2" src="https://assets.codepen.io/592829/example-image2.svg" alt="A friendly illustrated cloud character with eyes surrounded by a variety of icons (including check marks, stars, code brackets, buttons, hearts, a checkbox, and many more) on a blue background.">

  <label>
    Select what percentage of the bottom image to show
    <input type="range" min="0" max="100" class="image-compare-input">
  </label>
</div>

html, body {
  margin: 0;
  padding: 0;
}

.image-compare {
  /* Create a positioning context for the images */
  position: relative;
}

.image-2 {
  --exposure: 50%;
  
  display: block;
  position: absolute;
  top: 0;
  clip-path: polygon(
    var(--exposure) 0, 
    100% 0, 
    100% 100%, 
    var(--exposure) 100%
  );
}

const clippedImage = document.querySelector('.image-2');
const clippingSlider = document.querySelector('.image-compare-input');

clippingSlider.addEventListener('input', (event) => {
  const newValue = `${event.target.value}%`
  clippedImage.style.setProperty('--exposure', newValue)
})