🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →


Progress value is 30%

Image Comparison Slider

A draggable image slider used to compare two versions of the same image.

Copy: View demo


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.

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us