Compare Slider
Before and after, split by a handle: for edits, upscales and variations.
In use
The Image Edit Studio's Compare: a version against its parent. Run an edit, then press Compare.
Your image will appear here
Your image will appear here
Your image will appear here
Your image will appear here
Paint over what to change. Tab reaches the marks: arrow keys move one, Enter edits its note, Delete removes it.
Your video will appear here
Installation
pnpm dlx shadcn@latest add https://mgp.paukraft.com/r/compare-slider.jsonCompareSlider
| Prop | Type | Default |
|---|---|---|
| before | stringImage left of the handle. | — |
| after | stringImage right of the handle. | — |
| beforeLabel / afterLabel | ReactNodeCorner tags; they fade as the handle covers them. Pass null to hide. | "Before" / "After" |
| beforeAlt / afterAlt | stringDescribe each image. | — |
| position / defaultPosition | number0–100 from the left. Controlled with onPositionChange. | 50 |
| aspectRatio | number | stringA number, CSS "16 / 9", or the API's "16:9". | — |
Parts
Compose your own from the parts, e.g. to compare two loaders while a variation generates.
| Prop | Type | Default |
|---|---|---|
| CompareSliderRoot | position, aspectRatio, …Frame and slider. Drag anywhere; arrow keys on the handle. | — |
| CompareSliderAfter | childrenThe full frame. Any media: an image, a video, a loader. | — |
| CompareSliderBefore | childrenClipped to the left of the handle. | — |
| CompareSliderLabel | { side: "before" | "after" }A corner tag. | — |
| CompareSliderHandle | aria-labelDivider and grip. | — |
| useCompareSlider | () => { position }For your own layers. | — |