Before and after slider

Use it for

• Showing the effect of a product on the same view
• Image edits, redesigns and data before and after a change

Avoid

• Two views that do not line up, which makes the comparison meaningless
• Small screens where the divider covers the detail

How it works

Both panels are stacked in the same box. The before panel is clipped with clip-path inset, whose right edge is driven by a --pos variable, and the handle is positioned from the same variable. Pointer down anywhere captures the pointer and every move writes --pos and aria-valuenow straight to the DOM, so there is no React render per frame.

Accessibility

The handle is a focusable element with role slider, a label, aria-valuenow and aria-valuetext. Arrow keys move it 5 percent (20 with Shift) and Home and End jump to the edges. touch-action pan-y lets phones scroll vertically while horizontal drags move the divider.