Image-Compare Slider

✦ Every detail deserves a second look.

Show two versions of an image in one beautifully simple frame. Editorial Image Compare pairs a draggable before-and-after slider with clean typography, image labels and a distinctive circular handle. Make it completely your own with flexible controls for layout, styling and motion :)

⚙ What you can customize

Easily adapt every part of the component to match your own brand and style.

Before and after images ✦ Image labels ✦ Optional monochrome treatment ✦ Headline ✦ Description ✦ CTA text and link ✦ Initial split position ✦ Image height ✦ Border radius ✦ Handle size and color ✦ Background and text colors ✦ Typography ✦ Handle motion speed

🎯 Perfect for

Creative portfolios ✦ Photography edits ✦ Interior design ✦ Architecture projects ✦ Retouching showcases ✦ Brand redesigns ✦ Visual transformations ✦ Case studies

📱 Responsive by default

The component adjusts to its available width, with the comparison image and content adapting to narrow layouts without losing the main interaction.

🖱 Included interactions

Pointer drag comparison ✦ Click-to-reposition ✦ Keyboard arrow navigation ✦ Home and End shortcuts ✦ Visible focus state ✦ Optional external CTA ✦ Reduced-motion support

🔗 Live Preview

https://orange-places-243928.framer.app

––––––––

❤ Thank you so much for your support! I genuinely appreciate every download. I hope you have fun customizing this component and making it your own. Happy building!