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
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
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
Switch orientation to see the divider axis change.
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. |