Compare Two Images With Range Input

Preview:

Description:

A minimal and fast before/after image comparison slider built with range input and a bit of JavaScript.

How to use it:

1. Add a range input together with before/after images to the image comparison UI.

<div class="compare">
  <section class="before">
    <img src="1.png" alt="" />
  </section>
  <section class="after">
    <img src="2.png" alt="" />
  </section>
  <input type="range" id="range" step="0.1">
</div>

2. The necessary CSS rules for the image comparison slider.

.compare {
  display: grid;
  
  > * {
    grid-area: 1 / 1;
  }
  
  > section {
    display: grid;
    place-content: center;
  }
  
  .before {
    -webkit-mask: linear-gradient(to right, #000 0, var(--pos, 50%), #0000 0);
            mask: linear-gradient(to right, #000 0, var(--pos, 50%), #0000 0);
  }
  .after {
    -webkit-mask: linear-gradient(to right, #0000 0, var(--pos, 50%), #000 0);
            mask: linear-gradient(to right, #0000 0, var(--pos, 50%), #000 0);
  }
  > input[type="range"] {
    z-index: 1;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    &::-webkit-slider-thumb {
      -webkit-appearance: none;
              appearance: none;
      inline-size: 4px;
      block-size: 100dvh;
      background-color: CanvasText;
    } 
    &::-moz-range-thumb {
      -moz-appearance: none;
           appearance: none;
      inline-size: 4px;
      block-size: 100dvh;
      background-color: CanvasText;
    }
  }
}
img {
  max-block-size: 80dvh;
  max-inline-size: 100%;
}

3. Enable the range input to compare the difference between before/after images.

range.oninput = () =>
document.body.style.setProperty('--pos', range.value + '%')