Components
Compare slider
Before and after, split by a handle you drag. The handle is a drop of liquid: it stretches with speed and wobbles back when you stop. Works with images, video or any markup.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { CompareSlider } from '@vizzele/react';
<CompareSlider
before={<img src="/raw.jpg" alt="Photo before editing" />}
after={<img src="/graded.jpg" alt="Photo after colour grading" />}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
before / after | ReactNode | — | The two layers, the same size. |
position / defaultPosition / onPositionChange | number | 50 | 0–100. |
beforeLabel / afterLabel | string | 'Before' / 'After' | Corner tags. |
hover | boolean | false | Follow the mouse without pressing. |
label | string | 'Comparison' | Name of the handle. |
Accessibility
- The handle is a role="slider": arrow keys move it (Shift for 10%), Home and End go to the edges.
- Pressing anywhere on the image moves the handle there and focuses it.
- Vertical scrolling still works on touch screens.