Slider Compare

Create a polished interactive comparison between two images with Slider Compare.

Create a polished interactive comparison between two images with Slider Compare. Reveal differences, transformations, and visual progress with a smooth draggable slider that works beautifully across desktop and mobile. Perfect for before & after showcases, photography, design revisions, architecture, interiors, renovations, product presentations, AI imagery, retouching, branding, and creative portfolios. Key Features Interactive drag-to-compare slider Vertical or Horizontal slider orientation Optional Spotlight comparison mode Adjustable spotlight size and softness Before & After image support Smooth mouse and touch interaction Adjustable starting slider position Customizable divider and handle Before / After labels Custom typography controls Adjustable label position and styling Border radius and spacing controls Fully responsive design Works with any image combination Easy customization through Framer Property Controls Lightweight and focused on smooth interaction Spotlight Mode provides an alternative way to explore your images by focusing on a specific area while revealing the corresponding before-and-after detail. Use the Vertical slider for a side-by-side reveal or the Horizontal slider for a top-to-bottom comparison. Designed as a flexible Framer Code Component, Image Compare Slider can be dropped into any project and styled to match your website. Compare. Reveal. Focus on the details.

Before & After Image Compare