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