Before After Slider
A sleek, customizable Before & After Image Slider for visual comparisons. Perfect for showcasing product improvements, design revisions, or skin transformations, with full control.
Make it with Workshop
Build your own component with AI
About this Component
The Before After Slider is a powerful visual comparison component designed for creators, marketers, and designers who want to highlight transformations with elegance and control.
Whether you're comparing skin treatments, UI redesigns, home renovations, or photo edits, this component offers:
Image Input Controls for uploading both before and after visuals
Initial Slider Position setting to control the starting reveal
Draggable Handle with your choice of icons: arrows or chevrons
Customizable Icon Container — choose between round, square, or your own radius
Full styling options for icon color, padding, background, and component corner radius
Built-in fallback text if images aren't provided
Designed with flexibility in mind, this component is fully responsive, intuitive to use, and easy to integrate into any Framer project.
