Before/After Slider — Image Comparison Snippet

A before/after slider stacks two images and lets a visitor drag a divider to reveal how much of each is showing — the standard pattern for photo editing demos, before/after room renovations, and product comparison shots. This snippet builds the reveal with a single CSS property, clip-path, rather than the older technique of resizing an overflow: hidden container.

The clip-path reveal

Both images are stacked with position: absolute; inset: 0, fully overlapping. The top ("after") image has clip-path: inset(0 0 0 50%) applied, which clips away everything to the left of the 50% mark, letting the bottom ("before") image show through in that region. Dragging the handle simply rewrites the left inset percentage on every move — inset(0 0 0 ${pct}%). This is cheaper for the browser than the historical technique of width-clipping an inner wrapper, because clip-path doesn't affect layout at all; it only changes what's painted, so there's no reflow on every drag frame.

Pointer Events with capture

A single set of pointerdown/pointermove/pointerup handlers covers mouse, touch, and pen with no separate touch-event code path. handle.setPointerCapture(e.pointerId) on pointerdown is the detail that keeps the drag working smoothly on a touchscreen — without it, a finger that drifts slightly off the handle element mid-drag can lose the pointermove events entirely, since by default they're only delivered to whatever element is directly under the pointer.

Position math

positionFromEvent() reads compare.getBoundingClientRect() on every move and computes ((clientX - rect.left) / rect.width) * 100 to convert a raw pixel coordinate into a percentage. Recomputing the bounding rect on every event (rather than caching it once at drag-start) means the slider stays correct even if the container's size changes mid-drag, for example from a responsive layout shift or an orientation change on mobile.

Keyboard accessibility

The handle carries role="slider", tabindex="0", and aria-valuemin/aria-valuemax/aria-valuenow — the standard ARIA slider pattern. ArrowLeft/ArrowRight nudge the position by 5%, and Home/End jump to the extremes. This means the entire comparison is fully operable without a pointer at all, which a pure drag-only implementation would miss completely; screen readers announce the current percentage from aria-valuenow, which is kept in sync with the visual position on every update.

Why the grip has two chevrons

The circular handle grip contains two small chevrons pointing left and right rather than a single icon, which visually communicates "this drags both directions" at a glance — a subtle affordance cue that a plain circle or single-arrow icon doesn't convey.

Swapping in real images

The demo uses two CSS gradients as stand-ins so the snippet has no external image dependency. To use real photos, replace .swatch-before/.swatch-after's background with background-image: url(...); background-size: cover; background-position: center on the two .pane elements, and make sure both images share the exact same dimensions and framing — a comparison slider only reads correctly when the two images are pixel-aligned to each other.

Performance note

Because the reveal is driven by clip-path and the handle position by left (a cheap property for a thin absolutely-positioned element with no siblings reflowing around it), the drag stays smooth even with two full-resolution photographs loaded, unlike a canvas-based cross-fade approach that would need to redraw pixels on every frame.

See also the scroll before/after snippet for a scroll-triggered (rather than drag-triggered) reveal of the same concept, and the color swatch snippet if you only need a static side-by-side rather than an interactive divider.