Before/After Comparison Slider

Build a before/after comparison slider: two stacked panels (images or videos), the top one revealed with clip-path inset driven by a draggable vertical handle. Use a full-size transparent range input for accessibility and keyboard support. Handle shows a circular grip with left/right arrows.

<style>*{box-sizing:border-box;margin:0}body{font-family:Inter,system-ui,sans-serif;overflow:hidden}</style><style>body{height:100vh;position:relative;font:800 40px system-ui}.a,.b{position:absolute;inset:0;display:grid;place-items:center}.a{background:#e9e9e9;color:#999}.b{background:#111;color:#c6ff3d;clip-path:inset(0 0 0 50%)}
input{position:absolute;inset:0;width:100%;opacity:0;cursor:ew-resize}.h{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;pointer-events:none}</style>
<div class="a">Static</div><div class="b" id="b">Animated</div><div class="h" id="h"></div><input type="range" value="50" oninput="b.style.clipPath='inset(0 0 0 '+this.value+'%)';h.style.left=this.value+'%'">