Dev Tools
ComparisonSlider
Before/after slider with two slots and a draggable vertical divider. Renders both slots stacked on top of each other; the right slot is clipped based on handle position so dragging reveals the left slot. Used to compare light and dark themes of the same scene.
Import
import ComparisonSlider from '../../components/utility/ComparisonSlider.astro';Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
leftLabel | string | No | "Light" | Badge shown in the top-left corner |
rightLabel | string | No | "Dark" | Badge shown in the top-right corner |
initial | number | No | 50 | Initial handle position, 0–100 |
minHeight | string | No | "360px" | CSS length for the stage min-height |
ariaLabel | string | No | "Comparison slider" | Accessible group name |
Slots
| Slot | Purpose |
|---|---|
left | Content shown on the left side of the divider (bottom layer) |
right | Content shown on the right side of the divider (top layer, clipped) |