Image Comparison Slider
A draggable image slider used to compare two versions of the same image.
Copy:
View demo
Dependencies
All components are built upon the CodyHouse Framework.
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.
Changelog
-
✅ Fixed drag issue on Android devices🗓 October 14, 2019
-
✅ Component created🗓 September 19, 2019
Bug Report & Feedback
Get in touch: suggest a component or report a bug.