Comparison Slider
betaTwo versions of one thing stacked — before and after, light and dark — with a divider you drag, hover or step with the keyboard to reveal either.
- Display
- 1 file
- 1 npm package
- Accessibility notes
pnpm dlx @dowel-ui/cli add comparison-slidernpm packages installed: class-variance-authority.
import { ComparisonSlider } from "@/components/ui/comparison-slider";Default
Follows The Mouse
Vertical
<ComparisonSlider>
| Prop | Type | Default |
|---|---|---|
after (required)The version shown on the "after" side (end, or bottom). | ReactNode | — |
before (required)The version shown on the "before" side (start, or top). | ReactNode | — |
afterLabel | string | "After" |
beforeLabelShort names for the two sides, shown as tags and spoken with the position. | string | "Before" |
defaultValueDivider position it starts at, uncontrolled. Default 50. | number | 50 |
hideLabelsHide the side tags; the names are still spoken. Default false. | boolean | false |
interaction
| "drag" | "hover" | "drag" |
labelAccessible name for the divider. Default "Comparison position". | string | "Comparison position" |
onValueChange | (value: number) => void | — |
orientation | "horizontal" | "vertical" | "horizontal" |
valueDivider position, 0–100, controlled. | number | — |
Plus every attribute of <div> except defaultValue, onChange.
9/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — fails
- No fixed widths — passes