Image Comparison
displaySide-by-side image comparison slider with drag handle.
Preview
No preview available
Check the code examples below.
Installation
npm install @launchapp/design-systemImport
import { ImageComparison } from "@launchapp/design-system";Examples
Before/after comparison
<ImageComparison before={{ src: "/before.jpg", alt: "Before" }} after={{ src: "/after.jpg", alt: "After" }} defaultPosition={40}/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
before* | { src: string; alt: string } | — | Before image. |
after* | { src: string; alt: string } | — | After image. |
defaultPosition | number | 50 | Initial slider position (0-100). |