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.

Dynamic Initialization #

If your slider is dynamically added to your page, you can initialize it using the ComparisonSlider object:

var comparisonSlider = document.getElementsByClassName('js-compare-slider');
new ComparisonSlider(comparisonSlider[0]);

🌅 Demo photo by Anita Austvika on Unsplash.