Mouse and touch
The native range control supports pointer and touch interaction.
Accessible comparison demo
Before & After
A reusable, keyboard-operable comparison component using original abstract visuals, labels, reset controls and static descriptions.
All visuals are original abstract placeholders. Replace them only with licensed media and accurate descriptions.
BeforeAfter
Text description: the before visual uses a compact warm architectural composition; the after visual opens the layout into a greener, more organized outdoor composition.
Keyboard controls
Arrow keys, Home and End adjust the comparison.
Reduced motion
The control has no required motion and remains fully usable.
Static fallback
Both images include meaningful alternative text, and the written description communicates the comparison without interaction.
Implementation notes
- No external library
- Native range input
- Visible labels
- Reset control
- Responsive aspect ratio