---
title: "Impact Slider — Free Framer component · Best of Framer"
description: "Free Framer component · by Sourav D · Carousels. Easily show the impact of your skills"
canonical: "https://framer.elliotli.dev/component/impact-slider"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Impact Slider

# Impact Slider

Easily show the impact of your skills

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

![Impact Slider preview image 1](https://framer.elliotli.dev/og/component/impact-slider/79d6ea26e7a8233b/1600x1200.jpg)

## Summary

Easily show the impact of your skills

## Description

Here is a structured description for your **Before After Slider** component details. This is designed to be clear, professional, and helpful for potential users.

## Overview

The **Before After Slider** is a high-utility Framer component built for **photographers, UI/UX designers, and creative professionals**. Whether you’re showcasing a photo retouch, a website redesign, or a product transformation, this tool provides a seamless, interactive way for visitors to visualize the impact of your work.

## Key Customization Features

Take full control over the look and feel of your comparisons with built-in properties:

-   **Flexible Interaction:** Choose between a classic **drag** interaction or enable **Snap to Cursor** for a more fluid, hover-driven experience.
    
-   **Custom Handle & Icon:** Upload your own **Handle Icon** and adjust the **Handle and Icon sizes** to match your brand's aesthetic.
    
-   **Tailored Labels:** Use the **Label Style** dropdown to add "Before" and "After" text overlays or keep it minimalist.
    
-   **Styling Controls:** Set a custom **Start Position** for the slider and adjust the **Corner Radius** for a rounded or sharp-edged look.
    

## Critical Setup Instruction

**Important Note on Visibility:** > When you first drag the component onto your canvas, it may appear **invisible** or collapsed. To fix this, simply go to the **Size** settings in the right sidebar and **change the Width and Height from "Fit" to "Fixed."** You can then manually resize the component to fit your layout perfectly.

### Why use this?

-   **Engagement:** Encourages users to interact with your portfolio.
    
-   **Clarity:** Makes complex changes instantly understandable.
    
-   **Performance:** Lightweight and optimized for Framer sites.
    

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

-   All · #4578

## Details

- **Author**: Sourav D
- **Published**: 2026-04-28
- **Updated**: 2026-04-28
- **Added**: 2026-04-16
- **Categories**: Carousels

## More like this

-   [3DCurvedImageMarquee](/component/3dcurvedimagemarquee) — Lera · $4 — Curved perspective double ticker
-   [Orbit Kit Carousel](/component/orbit-kit-carousel) — Khairul Fauzy Khairudin · $12 — 3D drag carousel with inertia
-   [Team Orbit](/component/team-orbit) — Ali Musa · Free — Interactive Team Showcase
-   [Glow Testimonial](/component/glow-testimonial) — Interface Studio · Free — Testimonials with a Little Glow