---
title: "Before After Slider — Framer component · Best of Framer"
description: "$11.00 · Framer component · by Desygnative · Interactive. The Before After Slider is a useful visual comparison component designed for creators, marketers, and designers who want…"
canonical: "https://framer.elliotli.dev/component/before-after-slider"
---

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

# Before After Slider

Show the difference instantly

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

![Before After Slider preview image 1](https://framer.elliotli.dev/og/component/before-after-slider/4155943d648b31a4/1600x1200.jpg)

## Summary

The Before After Slider is a useful visual comparison component designed for creators, marketers, and designers who want to highlight transformations with elegance and control.

## Description

The **Before After Slider** is a useful 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.

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

-   All · #8451

## Details

- **Author**: Desygnative
- **Price**: $11.00
- **Published**: 2025-08-04
- **Updated**: 2026-05-09
- **Added**: 2025-08-01
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase