ComparisonSlider
Before/after image comparison with a draggable handle. Perfect for UI redesigns and visual changes.
For isolated previews, theme switching, and sandbox editing, open the ComparisonSlider playground on holydocs.com .
When to use
Use this component when the reader benefits from an active surface such as a form, quiz, chart, or draggable visual.
Live Examples
Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.
Basic
Simple before/after comparison.
mdx<ComparisonSlider before="https://placehold.co/600x300/1a1a2e/e2e8f0?text=Before" after="https://placehold.co/600x300/7c3aed/ffffff?text=After" beforeLabel="v1.0" afterLabel="v2.0" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
before | string | -- | Before image URL. |
after | string | -- | After image URL. |
beforeLabel | string | -- | Label on the before side. |
afterLabel | string | -- | Label on the after side. |
Usage
Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.
mdx<ComparisonSlider before="https://placehold.co/600x300/1a1a2e/e2e8f0?text=Before" after="https://placehold.co/600x300/7c3aed/ffffff?text=After" beforeLabel="v1.0" afterLabel="v2.0" />
Tips
- Explain what changes when a reader interacts with the component. Motion or controls alone should not carry the full meaning.
- Keep a non-interactive fallback in mind for screenshots, exported docs, and AI-driven readers that only see the resulting HTML.
- Verify keyboard behavior and focus states whenever the component includes inputs, toggles, or draggable controls.
Related Components
More
- Interactive playground: ComparisonSlider on holydocs.com
- Component library index: /components