Before/after slider

<figure class="compare" style="--position: 50%">
  <!-- The scene is drawn once and reused, so both sides always line up. -->
  <svg width="0" height="0" aria-hidden="true">
    <defs>
      <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff9a5a"/><stop offset=".55" stop-color="#ffcf7a"/><stop offset="1" stop-color="#7ab8ff"/></linearGradient>
      <symbol id="scene" viewBox="0 0 400 240">
        <rect width="400" height="240" fill="url(#sky)"/>
        <circle cx="300" cy="92" r="34" fill="#fff4c9"/>
        <path d="M0 170 L80 95 L150 160 L230 70 L320 150 L400 105 V240 H0Z" fill="#3b5b8a"/>
        <path d="M0 195 L110 140 L200 190 L290 135 L400 180 V240 H0Z" fill="#253f66"/>
        <rect y="205" width="400" height="35" fill="#1b2f4d"/>
        <path d="M40 222h70M180 216h90M300 226h60" stroke="#7ab8ff" stroke-width="3" stroke-linecap="round" opacity=".6"/>
      </symbol>
    </defs>
  </svg>

  <svg class="compare-after" viewBox="0 0 400 240" role="img" aria-label="Edited photo"><use href="#scene"/></svg>
  <svg class="compare-before" viewBox="0 0 400 240" role="img" aria-label="Original photo"><use href="#scene"/></svg>

  <span class="compare-label before-label">Before</span>
  <span class="compare-label after-label">After</span>
  <span class="compare-handle" aria-hidden="true"></span>

  <input class="compare-range" type="range" min="0" max="100" value="50" aria-label="Compare before and after">
</figure>

.compare {
  position: relative;
  width: min(460px, 100%);
  margin: 0;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--line);
  user-select: none;
  cursor: ew-resize;
  touch-action: pan-y;   /* vertical swipes still scroll the page; horizontal drags move the slider */
}
.compare > svg[width="0"] { position: absolute; }
.compare > svg:not([width="0"]) { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* "Before" sits on top and is clipped to the left of --position. */
.compare-before {
  filter: grayscale(1) contrast(0.8) brightness(0.95);
  clip-path: inset(0 calc(100% - var(--position)) 0 0);
}

/* The divider line and its round grip. */
.compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--position);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}
.compare-handle::after {
  content: '⟷';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  font: 600 16px system-ui, sans-serif;
  color: #1b2f4d;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.compare-label {
  position: absolute;
  top: 12px;
  padding: 4px 9px;
  border-radius: 99px;
  font: 600 12px system-ui, sans-serif;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.before-label { left: 12px; }
.after-label { right: 12px; }

/* The real control for keyboards and screen readers: a native range input laid
   over the image, invisible. Pointer dragging is handled by the script instead,
   because some mobile browsers only let you drag a range by its tiny thumb. */
.compare-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.compare:has(.compare-range:focus-visible) .compare-handle::after { outline: 3px solid var(--brand); outline-offset: 2px; }

// Before/after slider: the range input holds the position (0–100). We copy it
// into the --position CSS variable, and CSS moves the clip and the handle.

document.querySelectorAll('.compare').forEach((compare) => {
  const range = compare.querySelector('.compare-range');
  let isDragging = false;

  function update() {
    compare.style.setProperty('--position', `${range.value}%`);
    range.setAttribute('aria-valuetext', `${range.value}% before, ${100 - range.value}% after`);
  }

  // Turn a pointer's x position into a 0–100 value.
  function moveTo(event) {
    const box = compare.getBoundingClientRect();
    const percent = ((event.clientX - box.left) / box.width) * 100;
    range.value = Math.round(Math.max(0, Math.min(100, percent)));
    update();
  }

  // Mouse, pen and touch: press anywhere and drag.
  compare.addEventListener('pointerdown', (event) => {
    isDragging = true;
    compare.setPointerCapture(event.pointerId);
    moveTo(event);
  });
  compare.addEventListener('pointermove', (event) => { if (isDragging) moveTo(event); });
  for (const eventName of ['pointerup', 'pointercancel']) {
    compare.addEventListener(eventName, () => (isDragging = false));
  }

  // Keyboard: arrow keys change the range input natively.
  range.addEventListener('input', update);
  update();
});