# Image Compare

Source: https://lumeo.nativ.sh/components/image-compare

# Image Compare

An interactive before/after image slider — drag the divider to reveal the difference between two images. Great for photo editing demos and product comparisons.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<ImageCompare />

## When to Use

-   Before/after comparisons for photo retouching or image processing
-   Design reviews showing original vs. revised versions
-   Photo editing demos highlighting filter or adjustment effects
-   Product comparisons where visual difference matters

Preview Code

Horizontal Comparison

![After](https://images.unsplash.com/photo-1531297484001-80022131f5a1?w=800&q=60) ![Before](https://images.unsplash.com/photo-1531297484001-80022131f5a1?w=800&q=60&grayscale)

BeforeAfter

Preview Code

Vertical Comparison

![Forest](https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?w=800&q=60) ![Mountain](https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=60)

MountainForest

Preview Code

Orientation (interactive)

Switch orientation to see the divider axis change.

Horizontal Vertical

![Color](https://images.unsplash.com/photo-1531297484001-80022131f5a1?w=800&q=60) ![Grayscale](https://images.unsplash.com/photo-1531297484001-80022131f5a1?w=800&q=60&grayscale)

GrayscaleColor

Preview Code

Custom Initial Position

![Color](https://images.unsplash.com/photo-1531297484001-80022131f5a1?w=800&q=60) ![Grayscale](https://images.unsplash.com/photo-1531297484001-80022131f5a1?w=800&q=60&grayscale)

GrayscaleColor

Preview Code

No Labels

![](https://images.unsplash.com/photo-1531297484001-80022131f5a1?w=800&q=60) ![](https://images.unsplash.com/photo-1531297484001-80022131f5a1?w=800&q=60&grayscale)

## API Reference

### ImageCompare

Property

Type

Default

Description

BeforeSrc

string

""

URL of the "before" image (shown on the left/top).

AfterSrc

string

""

URL of the "after" image (shown on the right/bottom).

BeforeLabel

string?

"Before"

Label overlay on the before image. Set to empty string to hide.

AfterLabel

string?

"After"

Label overlay on the after image. Set to empty string to hide.

InitialPosition

int

50

Initial divider position as a percentage (1–99).

Height

string

"400px"

Height of the comparison container.

Width

string

"100%"

Width of the comparison container.

Orientation

Lumeo.Orientation

Horizontal

Horizontal splits left/right; Vertical splits top/bottom.

## Related Components

-   [Image](/components/image) — Display a single image with preview and lazy loading
-   [Slider](/components/slider) — A range input for numeric values
-   [Card](/components/card) — Wrap comparisons in a card for structured layouts