Image Comparison Slider
A draggable image slider used to compare two versions of the same image.
All components are based on CodyFrame.
If you're using this component, you should also include the SCSS/JS of the following components:
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.
Dynamic Initialization #
If your slider is dynamically added to your page, you can initialize it using the
var comparisonSlider = document.getElementsByClassName('js-compare-slider');
🌅 Demo photo by Anita Austvika on Unsplash.