---
title: "Before After Image — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Ethan Brooks · Interactive. Customizable Before & After Slider"
canonical: "https://framer.elliotli.dev/component/before-after-image"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Before After Image

# Before After Image

Customizable Before & After Slider

[View on Framer](https://framer.com/marketplace/components/before-after-image/?via=elliot-li)

![Before After Image preview image 1](https://framer.elliotli.dev/og/component/before-after-image/e9649281f5ddd1d9/1600x866.jpg)

## Summary

Customizable Before & After Slider

## Description

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

## Rank history [How rankings work →](/terms#rankings)

-   All · #6107

## Details

- **Author**: Ethan Brooks
- **Price**: $5.00
- **Published**: 2026-08-01
- **Updated**: 2026-08-01
- **Added**: 2026-08-01
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step