Velora UI

Compare Slider

Before/after wipe with a keyboard-accessible divider.

  • 1.2 KB gzipped
  • Zero dependencies
  • Reduced-motion safe
  • Base UI & Radix compatible
Open in v0

Preview

After
Before

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/compare-slider.json

Adds components/velora/compare-slider.tsx.

Props

PropTypeDefault
before*React.ReactNode—
after*React.ReactNode—
initial

Starting divider position, 0–100

number50
label

Announced by the slider handle

string"Compare before and after"
classNamestring—

Accessibility

Reduced motion
Nothing animates: the divider and clip jump straight to the slider value, so reduced-motion users see the same thing as everyone else.
Keyboard
The handle is a native range input covering the panel. Tab focuses it (the panel shows a focus ring), and Arrow keys, Home, End, PageUp and PageDown move the divider.
Screen readers
A native slider (0 to 100, position announced) named by the `label` prop, default "Compare before and after"; the visual divider is aria-hidden.