Lumeo

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
AfterBefore
BeforeAfter
ForestMountain
MountainForest

Switch orientation to see the divider axis change.

ColorGrayscale
GrayscaleColor
ColorGrayscale
GrayscaleColor
AfterBefore

API Reference

ImageCompare

  • Image — Display a single image with preview and lazy loading
  • Slider — A range input for numeric values
  • Card — Wrap comparisons in a card for structured layouts