---
title: "Hybrid Media Slider — Framer component · Best of Framer"
description: "$5.00 · Framer component · by CodePerfect · Carousels. The universal comparison tool for images"
canonical: "https://framer.elliotli.dev/component/hybrid-media-slider"
---

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

# Hybrid Media Slider

The universal comparison tool for images

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

![Hybrid Media Slider preview image 1](https://framer.elliotli.dev/og/component/hybrid-media-slider/27accfec8f00e3ee/1600x1200.jpg)

## Summary

The universal comparison tool for images

## Description

Hybrid Media Comparison is the ultimate Before/After slider for Framer. Unlike standard sliders, it seamlessly handles Images and Videos, offering a premium, interactive experience for showcasing renovations, retouching, color grading, or design iterations.

## Key Features

-   Compare Image-to-Image, Image-to-Video, or Video-to-Video.
    
-   Unique "Play on Reveal" logic making video comparisons engaging and performant.
    
-   Control handle shape, icon type (arrows, chevron, dots), colors, and opacity.
    
-   Optional "Before/After" labels with customizable positioning, styling, and backdrop blur simulations.
    
-   Works perfectly on mobile, tablet, and desktop with smooth gestures.
    
-   Supports both Horizontal and Vertical comparison modes.
    

## Usage

1.  Copy & Paste the component URL onto your canvas.
    
2.  Select your media type (Image or Video) for both sides.
    
3.  Upload your assets or paste URLs.
    
4.  Customize the **Handle**, **Overlay**, and **Labels** to match your brand.
    
5.  Enable **Hybrid Sync** to autoplay videos only when interacting.
    

## Customization Options

-   **Handle**: Square, Rounded, or Circle shapes. Custom icons.
    
-   **Labels**: Adjust text, font size, background opacity (using color alpha), and border.
    
-   **Overlay**: Add a subtle color overlay to the unrevealed side.
    

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

-   All · #10771

## Details

- **Author**: CodePerfect
- **Price**: $5.00
- **Published**: 2026-01-12
- **Updated**: 2026-02-13
- **Added**: 2025-12-20
- **Categories**: Carousels

## More like this

-   [Screen Stage Mockup](/component/screen-stage-mockup) — Aisol Studio · $14 — Your screens in synced devices
-   [Team Reel](/component/team-reel) — Ali Musa · Free — Interactive Team Showcase
-   [Slider](/component/slider) — MAS · Free — A smooth, customizable slider.
-   [Cascade Card Slider](/component/cascade-card-slider) — Tim Yeng · Free — Cards that cascade into view