Release card100 / 0
<CompareSlider variant="minimal" />Clean surfaces and measured motion.
Installation
Use the shadcn CLI to copy the component source and its dependencies into your own project. Only the Minimal world, with motion, plus the Ovio theme, world, motion items.
npx shadcn add JanaSundar/ovio/compare-slider-minimal↳You own the source. Ovio components arrive in your codebase so you can edit any part of their style, behavior, or data flow.
Usage
Set the visual world on the component, or wrap the page in an OvioProvider to set a default for everything inside it.
TSXvariant="minimal"
import { CompareSlider } from "@/components/ovio/compare-slider/compare-slider"
<CompareSlider
variant="minimal"
before={<img src="/v1.png" alt="" />}
after={<img src="/v2.png" alt="" />}
/>Built with: CSS clip-path · Motion for React (spring, drag; Retro: stepped)
Motion in Minimal: Small springs, opacity and layout shifts that show state.
Props
Control the data, selected world, animation behavior, and callbacks.
| Prop | Type | Description |
|---|---|---|
| before / after | ReactNode | The two versions, left and right of the divider. Images fill the view. |
| variantdefault minimal | minimalcraftretrotoy | Which world to render. Uses the nearest OvioProvider when there is one. |
| beforeLabel / afterLabeldefault "Before" / "After" | string | Printed in the top corners; each fades as the divider covers it. |
| value / defaultValuedefault 50 | number | How much of before shows, 0–100. Controlled, or the starting split. |
| onValueChange | (value: number) => void | Fires while dragging. |
| labeldefault "Compare" | string | Accessible name for the divider. |
| aspectRatiodefault "4 / 3" | string | CSS aspect ratio of the view. |
| className | string | Merged onto the root. |