Installation
Usage
import Image from "next/image"
import { CompareSlider } from "@/components/compare-slider"
export function Retouch() {
return (
<CompareSlider
label="Compare original and retouched photo"
beforeLabel="Original"
afterLabel="Retouched"
before={<Image src="/original.jpg" alt="Original photo" width={1200} height={800} />}
after={<Image src="/retouched.jpg" alt="Retouched photo" width={1200} height={800} />}
/>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| before / after | ReactNode | — | The two layers, same size. Images or any UI. |
| beforeLabel / afterLabel | string | — | Corner captions that fade as the divider reaches them; also used in the announced value. |
| value / defaultValue | number | — / 50 | Divider position in percent. |
| onValueChange | (value: number) => void | — | Called while dragging or using keys. |
| label | string | "Comparison divider" | Accessible name of the handle. |
| --compare-divider | CSS variable | white | Divider and glow colour. The position is also exposed as --compare-position. |
| mode | "drag" | "hover" | "drag" | Drag while pressed, or follow the mouse without a press (touch still drags). |
| orientation | "horizontal" | "vertical" | "horizontal" | Side by side, or top and bottom. |
| feather | number | 0 | Soften the seam over this many pixels instead of a hard cut. |
| hint | boolean | false | Sweep the divider once on first view (uncontrolled only). |
Accessibility
- The handle is role="slider" with min, max, now and a readable value ("46% Light, 54% Dark").
- ←/→ move 1%, Page Up/Down 10%, Home/End jump to the edges.
- A double-click returns the divider to its starting position; the keyboard reaches every position too.
- Drag with mouse, pen or touch; vertical page scrolling still works on phones.
- Both layers stay in the accessibility tree, so image alt text is read.
- Keyboard moves are instant; the first-view sweep never runs under prefers-reduced-motion or after someone has touched the slider.
Changelog
- v1.0.0Latest
First release.