Library · Media & Buttons

Media / Before-After Slider

Draggable before/after image comparison. Range-input control is keyboard-accessible; the frame is pointer-draggable; a static split shows with no JS. Tone via the shared contract.

Figma: Media / Before-After Slider ↗

Live preview — edit theme bottom-right

---
import BeforeAfterSlider from "../components/figma/BeforeAfterSlider.astro";
const img = (label, w, h) =>
  `data:image/svg+xml;utf8,` +
  encodeURIComponent(
    `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}"><rect width="${w}" height="${h}" fill="#c9c2b8"/><text x="${w/2}" y="${h/2}" font-family="sans-serif" font-size="20" fill="#5b5346" text-anchor="middle" dominant-baseline="middle">${label}</text></svg>`,
  );
---
<div style="max-width: 720px; margin-inline: auto;">
  <BeforeAfterSlider
    before={{ src: img("Before", 1200, 800), alt: "Before renovation" }}
    after={{ src: img("After", 1200, 800), alt: "After renovation" }}
    startPct={50}
    tone="base-100"
  />
</div>

Props

Name	Type	Required	Description
`before`	`ImageRef;`	Yes	The "before" image (revealed on the left)
`after`	`ImageRef;`	Yes	The "after" image (revealed on the right)
`startPct`	`number;`	—	Initial divider position, 0–100 (default: 50)
`beforeLabel`	`string;`	—	Label for the before side
`afterLabel`	`string;`	—	Label for the after side
`tone`	`"base-100" \| "base-200" \| "base-300" \| "primary" \| "secondary" \| "neutral";`	—	Background tone — the Figma colour-variant axis

Example with all props

<BeforeAfterSlider
  before={{ src: "/reno-before.jpg", alt: "Before renovation" }}
  after={{ src: "/reno-after.jpg", alt: "After renovation" }}
  startPct={50}
/>