<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 class="image-compare-label">
    <span class="visually-hidden">Select what percentage of the bottom image to show</span>
    <input type="range" min="0" max="100" class="image-compare-input">
  </label>
</div>

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

.image-compare {
  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%
  );
}

.image-compare-label {
  align-items: stretch;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.image-compare-input {
  --thumb-size: 15px;

  /* Go half a "thumb" off the edge to the left and right" */
  margin: 0 calc(var(--thumb-size) / -2);
  /* Make the input a full "thumb" wider than 100% so it extends past the edges */
  width: calc(100% + var(--thumb-size));
  cursor: col-resize;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
}

.visually-hidden {
  border: 0; 
  clip: rect(0 0 0 0); 
  height: 1px; 
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

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)
})