Creator tools / LIVE LAB
Back to SnippetsBefore-and-after comparison slider with keyboard control
A responsive comparison surface whose reveal can be changed by pointer or keyboard, with a visible percentage and a no-image demo state.
HTMLCSSJavaScript
Receipt: pointer optional, percentage visible, source images replaceable.
What this is
A visual reveal built on a labeled range input.
Use this for design refinements, restorations, edits, renovations, or any truthful before-and-after pair.
The range input remains the interaction authority; dragging the decorative divider is not required.
Use it
- Use two images with matching dimensions and meaningful nearby context.
- Test arrow keys, Page Up/Down, Home/End, touch, zoom, and reduced motion.
Make it yours
- Replace each generated scene with a same-size before and after image.
- Change the initial percentage or visual divider without removing the labeled range control.
Reuse contract
Supported environments
- Current Chrome, Edge, Firefox, and Safari
- CSS clip-path support
Security notes
- Provide accurate text context outside the decorative stage; the comparison cannot carry essential meaning alone.
- Validate remote image destinations and respect asset rights, privacy, and consent before publication.
Loading the isolated live lab…