CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →


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 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.


  • ✅ 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.

✅ Project duplicated

✅ Project created

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