Comparison slider
A draggable divider that wipes between two aligned images so you can inspect a before-and-after change in the same spot.
See it
What it is
A comparison slider stacks two matching images and reveals one through a movable clipping edge. Dragging the divider left and right creates a live before-and-after wipe, which makes small differences easier to inspect than two separate pictures. It is common for retouching, renovations, map layers, and visual product changes; Knight Lab's JuxtaposeJS packages the pattern for newsrooms.
Use one only when both images show the same subject from the same position. The divider should begin somewhere informative, usually near the middle, and labels must make clear which side is Before and which is After. A native range input gives the control keyboard and touch behavior without inventing a custom slider.
Gotcha: even a few pixels of crop, scale, or camera movement makes the result look like it jumps instead of changing. Put both images in the same aspect-ratio box and apply identical object-fit and object-position values. Do not make dragging the only interaction: arrow keys and an accessible value description should reveal the same range.
Ask AI for it
Build an accessible before-and-after comparison slider from two aligned images in one aspect-ratio container. Keep the After image underneath and reveal the Before image above it with clip-path: inset() driven by a --position CSS custom property. Use an input type='range' from 0 to 100 as the real control, place its visual divider and handle at the same percentage, and label it 'Image comparison' with aria-valuetext such as '60% before image'. Support arrow keys, pointer dragging, and touch-action: pan-y so the page can still scroll vertically. Apply the same object-fit and object-position to both images and show persistent Before and After labels.