---
title: "Compare Slider Pro X — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Ahmet Loca · Carousels. Compare Slider Pro X CompareSlider is an interactive before and after image slider for Framer."
canonical: "https://framer.elliotli.dev/component/compare-slider-pro-x"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Compare Slider Pro X

# Compare Slider Pro X

Drag to reveal before/after images

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

![Compare Slider Pro X preview image 1](https://framer.elliotli.dev/og/component/compare-slider-pro-x/e02bb9e885e39572/1600x1200.jpg)

## Summary

Compare Slider Pro X CompareSlider is an interactive before and after image slider for Framer.

## Description

**MORE FRAMER COMPONENTS LIKE THIS**

**✦ Browse +38 FREE + 85 premium components:** [**https://frameze.com/components**](https://frameze.com/components)

**✦ Get everything for one price:** [**https://ahmetloca.dub.link/allcomponents**](https://ahmetloca.dub.link/allcomponents)

## **About Compare Slider Pro X**

**CompareSlider** is an interactive before and after image slider for Framer. Drag a smooth vertical or horizontal divider to compare two images with full precision. Powered by unified pointer events for seamless mouse and touch interaction. Choose from paper or glass themes, add custom labels, control image focus points on both axes, and switch directions with a single prop.

Horizontal and vertical direction — switch with a single prop Smooth divider with circular handle and scale-on-drag effect Before and After labels with backdrop blur and theme-aware styling Mouse, touch and keyboard support — arrow keys, Home and End Image focus point controls — X and Y offset for both images independently Paper and glass themes with smooth animated transitions Mobile responsive — auto-reduces height under 768px Demo Mode — toggle direction live without leaving Framer Accent color control for focus ring and highlight states Works out of the box — upload two images and you're done

**Use Cases**

Product photography and packaging before and after reveals Beauty,

skincare and cosmetics treatment transformation pages

Architecture and interior design renovation comparison sections

Real estate staging and remodeling before and after features

Photo editing and retouching showcase and portfolio case studies

Fitness and body transformation landing and marketing pages

Art restoration and digital artwork reveal presentation sections

Web design and branding case study and comparison pages

**Keywords**

before after slider, image comparison slider, compare images, drag to compare, before after, image reveal slider, photo comparison, split view slider, before after image, drag slider, vertical comparison slider, horizontal slider, touch comparison slider, responsive image comparison

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

-   All · #1887

## Details

- **Author**: Ahmet Loca
- **Price**: $4.00
- **Published**: 2026-07-01
- **Updated**: 2026-09-30
- **Added**: 2026-07-01
- **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