Before After Image

Customizable Before & After Slider

Compare Slider Compare Slider is a premium, fully customizable Before & After image comparison component for Framer. Create smooth, interactive image comparisons for renovations, photography, product showcases, landscaping, beauty, healthcare, automotive, and more. Built with performance and flexibility in mind, every part of the component can be customized directly from Framer's Properties panel—no code editing required. Features Smooth drag interaction with mouse & touch support Fully responsive for desktop, tablet & mobile Adjustable default slider position Drag sensitivity control Smooth drag toggle Spring animation with adjustable stiffness & damping Multiple handle shapes Custom handle size, fill, border, shadow & opacity Built-in icon styles with editable size & color Optional divider with customizable width & color Border radius, border, background & shadow controls Image Fit (Cover, Contain, Fill) Image alignment options Optional hover effects Cursor customization Keyboard accessibility support Lightweight, production-ready code Fully Customizable Customize everything from the Properties panel: Before & After images Slider position Animation Handle style Icons Divider Border radius Colors Borders Shadows Background Image fit & alignment Hover effects Cursor style No coding required. Perfect For Home Renovation Interior Design Architecture Photography Product Comparison Car Detailing Landscaping Dental & Medical Beauty & Fitness Portfolio & Agency Websites Simply add the component, select your images, customize the design, and publish. Compare Slider delivers a clean, professional comparison experience that integrates seamlessly into any Framer project.

Customizable Before & After Slider