Compare Slider

Before/after wipe with a keyboard-accessible divider.

After

Before

Installation

pnpm dlx shadcn@latest add https://paulkeys.org/r/compare-slider.json

Adds components/velora/compare-slider.tsx.

Prop	Type	Default
`before*`	`React.ReactNode`	`—`
`after*`	`React.ReactNode`	`—`
`initial` Starting divider position, 0–100	`number`	`50`
`label` Announced by the slider handle	`string`	`"Compare before and after"`
`className`	`string`	`—`

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.

Before/after wipe with a keyboard-accessible divider.

After

Before

pnpm dlx shadcn@latest add https://paulkeys.org/r/compare-slider.json

Adds components/velora/compare-slider.tsx.

Prop	Type	Default
`before*`	`React.ReactNode`	`—`
`after*`	`React.ReactNode`	`—`
`initial` Starting divider position, 0–100	`number`	`50`
`label` Announced by the slider handle	`string`	`"Compare before and after"`
`className`	`string`	`—`

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.