Image Comparison Slider
A draggable image slider used to compare two versions of the same image.
Copy:
View demo
Dependencies
All components are based on CodyFrame.
If you're using this component, you should also include the SCSS/JS of the following components:
How To
The Image Comparison Slider component is used to compare two images (for example the before/after of the same object or a photo and its edited version).
A handle element can be dragged to change the size of the modified image (visible above the original one).
The component is keyboard accessible: once the handle is in focus, the next/prev arrow keys can be used to increase/reduce the width of the modified image.
🌅 Demo photo by Anita Austvika on Unsplash.
Categories
Bug Report & Feedback
Report a bug + changelog on Github ↗ | Suggest new components ↗