FX · Interactions

A before/after comparison with a draggable divider.

bash
npx shadcn@latest add https://www.rad-ui.com/r/compare-slider.json
React
import CompareSlider from "@/components/fx/compare-slider"

<CompareSlider
    before={<img src="/before.jpg" alt="Before colour grading" />}
    after={<img src="/after.jpg" alt="After colour grading" />}
/>
  • Driven by a real <input type="range">: arrow keys, Home/End, touch and value announcements come from the browser.
  • Visible focus ring on the handle.
  • Give both images meaningful alt text in `before` and `after`.
PropTypeDefaultDescription
before
ReactNode
—

Left-hand content.

after
ReactNode
—

Right-hand content.

label
string
'Comparison position'

Accessible name for the slider.

defaultValue
number
50

Starting position, 0–100.

Edit this page on GitHub →