Image Comparison Slider
Drag the handle to wipe between before and after.
BeginnerWeb appUI component4–10hAI-buildable 5/5no setup
A before-and-after wipe with a draggable divider. Small and immediately satisfying, with real subtleties: touch support, keyboard operation, and keeping both images perfectly registered at every viewport size.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Two images overlay with a draggable divider
- Dragging wipes between them smoothly
- Works with pointer, touch and keyboard arrow keys
- Images stay perfectly registered at every size
- Labels mark the before and the after sides
- The divider position can be set programmatically
- Works with images of any aspect ratio
The interesting part
- Keeping images registered when the container resizes
- Preventing page scroll while dragging on touch devices
Once it works
- Add a vertical wipe orientation
- Add zoom that applies to both images together
- Add a magnifier at the divider
Suggested stack
reacttypescripttailwind