Compare Slider

Before/after comparison with a draggable divider

Two layers stay perfectly registered while a draggable divider clips between them on a soft spring. Works with images or any React content — drag anywhere, or move the handle with arrow keys.

Preview

WireframeFinal

Installation

Install the component using the CLI.

npx shadcn@latest add https://rohan.run/r/compare-slider.json

Usage

Import the component:

import { CompareSlider } from "@/components/rohan/compare-slider"

Use it in your code:

<CompareSlider
  before={<img src="/photo-raw.jpg" alt="Unedited" />}
  after={<img src="/photo-edited.jpg" alt="Edited" />}
  beforeLabel="Raw"
  afterLabel="Edited"
/>

Props

Property	Type	Default	Description
before	ReactNode	—	Layer revealed on the left of the divider.
after	ReactNode	—	Layer revealed on the right of the divider.
beforeLabel / afterLabel	string	"Before" / "After"	Corner labels that fade in on hover.
defaultPosition	number	50	Initial divider position, 0–100.
className	string	—	Optional CSS classes for the container.

Components