Before and After Slider

Let people drag a handle to compare two versions of the same image.

simple Media & Video

What it adds

A pair of images stacked in one frame with a draggable divider that reveals more of one and less of the other.

What your agent is told to do

1
Fix the frame using the app's existing aspect-ratio handling and render both images inside it, so the layout never depends on when either image finishes loading.
2
Make the handle a real focusable control that moves with arrow keys in small steps and jumps to the ends with home and end, with the current position exposed as a value rather than only as a visual.
3
Hold the after image hidden until both images have decoded, then reveal them together. A comparison that shows one image alone for a moment reads as a broken layout.
4
Clamp the divider to the frame bounds and keep tracking the pointer after it leaves the frame, releasing cleanly when the button is released anywhere on the page.
5
Do not require the caller to supply pre-composited images. Accept two independent image references and let the component do the clipping, so the same pair can be reused elsewhere in the app.

Edge cases it handles

Two images of different dimensions will not line up, and the comparison becomes meaningless. Either reject the mismatch at the point the pair is configured or letterbox both to a shared frame using one consistent rule.
A handle that only responds to dragging excludes keyboard users entirely. Arrow keys must move the divider in fine steps, with larger jumps available, and the control must be reachable by tab.
Dragging past the edge of the frame must clamp the divider at zero or one hundred percent rather than producing a negative offset or letting the images detach from the frame.
If the second image loads after the first, it will flash into place under the divider. Wait for both to decode before revealing, and show a placeholder at the reserved size until then.
A vertical finger movement that starts on the handle must let the page scroll instead of being captured as a drag. Only take over the gesture once horizontal movement dominates.
Both images need their own alt text, and the labels for which side is before and which is after must be visible rather than assumed from left and right.
On a narrow screen the handle must stay large enough to grab with a thumb, which usually means a wider hit area than the visible divider line.

Definition of done

The frame is sized before either image loads and never shifts.
Mismatched dimensions are rejected or letterboxed by one consistent rule.
The handle is keyboard operable and exposes its position accessibly.
Dragging beyond the frame clamps cleanly and releases correctly.
Neither image is visible alone before both have loaded.
Vertical page scrolling still works when a touch gesture starts on the handle.
Both images carry alt text and the sides are labelled.
The feature matches the existing design system.
No existing functionality is broken.

Related features

Picture-in-Picture Mode

Audio Waveform Scrubber

Hover Video Preview

How it works

1

Copy the link

Grab the Markdown instruction URL for this feature.
2

Give it to your AI

Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.
3

It inspects, then implements

Your agent reads your existing app first, then adds the feature to fit it.

Works with your stack

These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.

Need it tighter than that? Customize the feature and tell it exactly what you're running.