Before/After Slider — Image Comparison Snippet

<div class="demo">
  <div class="compare" id="compare">
    <div class="pane pane-before">
      <div class="swatch swatch-before">Before</div>
      <div class="tag">Original</div>
    </div>
    <div class="pane pane-after" id="afterPane">
      <div class="swatch swatch-after">After</div>
      <div class="tag tag-after">Enhanced</div>
    </div>
    <div class="handle" id="handle" role="slider" tabindex="0" aria-label="Comparison position" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
      <div class="handle-line"></div>
      <div class="handle-grip">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
      </div>
    </div>
  </div>
  <p class="hint">Drag the handle, or use the arrow keys after focusing it</p>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8f9fa; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.demo { width: 100%; max-width: 420px; }
.compare { position: relative; width: 100%; aspect-ratio: 16/10; border-radius: 14px; overflow: hidden; user-select: none; box-shadow: 0 10px 30px rgba(0,0,0,0.12); cursor: ew-resize; }
.pane { position: absolute; inset: 0; }
.swatch { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.55); letter-spacing: 0.04em; }
.swatch-before { background: linear-gradient(135deg, #94a3b8, #475569); }
.swatch-after { background: linear-gradient(135deg, #38bdf8, #6366f1); }
.tag { position: absolute; top: 12px; left: 12px; background: rgba(15,23,42,0.55); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; letter-spacing: 0.03em; pointer-events: none; }
.tag-after { left: auto; right: 12px; }
.pane-after { clip-path: inset(0 0 0 50%); }
.handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; touch-action: none; }
.handle-line { position: absolute; top: 0; bottom: 0; width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }
.handle-grip { position: relative; z-index: 2; width: 36px; height: 36px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; gap: 1px; color: #374151; box-shadow: 0 3px 10px rgba(0,0,0,0.25); }
.handle:focus-visible .handle-grip { outline: 2px solid #2563eb; outline-offset: 2px; }
.hint { margin-top: 10px; font-size: 12.5px; color: #9ca3af; text-align: center; }

var compare = document.getElementById('compare');
var afterPane = document.getElementById('afterPane');
var handle = document.getElementById('handle');
var dragging = false;

function setPosition(pct) {
  pct = Math.max(0, Math.min(100, pct));
  afterPane.style.clipPath = 'inset(0 0 0 ' + pct + '%)';
  handle.style.left = pct + '%';
  handle.setAttribute('aria-valuenow', Math.round(pct));
}

function positionFromEvent(clientX) {
  var rect = compare.getBoundingClientRect();
  var pct = ((clientX - rect.left) / rect.width) * 100;
  setPosition(pct);
}

compare.addEventListener('pointerdown', function(e) {
  dragging = true;
  handle.setPointerCapture(e.pointerId);
  positionFromEvent(e.clientX);
});
compare.addEventListener('pointermove', function(e) {
  if (!dragging) return;
  positionFromEvent(e.clientX);
});
window.addEventListener('pointerup', function() { dragging = false; });

handle.addEventListener('keydown', function(e) {
  var current = parseFloat(handle.getAttribute('aria-valuenow'));
  if (e.key === 'ArrowLeft') { setPosition(current - 5); e.preventDefault(); }
  else if (e.key === 'ArrowRight') { setPosition(current + 5); e.preventDefault(); }
  else if (e.key === 'Home') { setPosition(0); e.preventDefault(); }
  else if (e.key === 'End') { setPosition(100); e.preventDefault(); }
});

setPosition(50);