---
title: "Image comparison — Free Framer component · Best of Framer"
description: "Free Framer component · by Hugo Marques · Interactive. Draggable before & after image slider"
canonical: "https://framer.elliotli.dev/component/image-comparison"
---

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

# Image comparison

Draggable before & after image slider

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

![Image comparison preview image 1](https://framer.elliotli.dev/og/component/image-comparison/3b08b2f95cccb866/1600x1200.jpg)

## Summary

Draggable before & after image slider

## Description

**Before After Slider** lets you showcase transformations, redesigns, photo edits, or any side-by-side comparison with a smooth drag interaction. Works on mouse and touch devices out of the box.

### Slider

-   Set the **starting position** (0–100%) so the reveal begins exactly where you want
    
-   Choose between **horizontal or vertical** orientation
    
-   Control the divider **line colour** and **thickness**
    

### Handle

-   Two handle styles: **Circle Outline** (frosted glass with backdrop blur) or **Solid** (filled)
    
-   Full control over handle **size**, **corner radius**, and **border width**
    
-   Toggle the optional **frosted blur** effect on the circle outline style
    
-   Four built-in **icons**: Arrows, Chevrons, Lines, or None — each with independent **icon size** control
    
-   Upload your own **custom SVG** icon to match your brand
    
-   Icon colour automatically **inverts** against the handle fill for solid handles
    

### Labels

-   Toggle **Before / After labels** on or off
    
-   Fully editable label **text**
    
-   Labels **automatically fade out** as the slider moves past them, so they never overlap the divider
    
-   Style labels with Framer's native **Font picker**, **Padding**, **Border**, **Border Radius**, **text colour**, and **background colour** controls — the same controls you'd use on any Framer text or frame
    

### Framer-native controls throughout

Property controls use native Framer types wherever possible — ControlType.Font, ControlType.Padding, ControlType.BorderRadius, and ControlType.Border — so everything feels right at home in the Framer design panel.

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

-   All · #331

## Details

- **Author**: Hugo Marques
- **Published**: 2026-05-30
- **Updated**: 2026-05-30
- **Added**: 2026-05-19
- **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