<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.">
  <span class="image-2-wrapper">
    <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.">
  </span>

  <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;
  clip-path: polygon(
    calc(var(--exposure) + 1px) 0, 
    100% 0, 
    100% 100%, 
    calc(var(--exposure) + 1px) 100%
  );
}

.image-2-wrapper {
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  filter: drop-shadow(-2px 0 0 hsla(0, 0%, 0%, 0.9));
}

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

.image-compare-input {
  --thumb-size: clamp(3em, 10vmin, 5em);

  /* 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;
}

/* Firefox */
.image-compare-input::-moz-range-thumb {
  /* A white background with slight transparency */
  background-color: hsla(0, 0%, 100%, 0.9);
  /* An inline SVG of two arrows facing opposite directions */
  background-image: url('data:image/svg+xml;utf8,<svg viewbox="0 0 60 60"  width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M20 20 L10 30 L20 40"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M40 20 L50 30 L40 40"/></svg>');
  background-size: 90%;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 50%;
  border: 2px hsla(0, 0%, 0%, 0.9) solid;
  color: hsla(0, 0%, 0%, 0.9);
  width: var(--thumb-size);
  height: var(--thumb-size);}

.image-compare-input:focus::-moz-range-thumb {
  box-shadow: 0px 0px 0px 2px hsl(200, 100%, 80%);
}

/* Chrome, Safari and Edge, */
.image-compare-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* A white background with slight transparency */
  background-color: hsla(0, 0%, 100%, 0.9);
  /* An inline SVG of two arrows facing opposite directions */
  background-image: url('data:image/svg+xml;utf8,<svg viewbox="0 0 60 60"  width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M20 20 L10 30 L20 40"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M40 20 L50 30 L40 40"/></svg>');
  background-size: 90%;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 50%;
  border: 2px hsla(0, 0%, 0%, 0.9) solid;
  color: hsla(0, 0%, 0%, 0.9);
  width: var(--thumb-size);
  height: var(--thumb-size);}

.image-compare-input:focus::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px var(--thumb-border-size) hsl(200, 100%, 80%);
}

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