Before/After Image Comparison Slider

The img_comparison: true flag loads img-comparison-slider. Drag the handle to reveal either image. Works with any two images — use it for before/after processing, design iterations, or any visual comparison.

Basic Comparison

Drag the divider to compare two images:

Slide left/right to compare. Use slot=“first” and slot=“second” on the Figure components.

With Caption Overlay

Adding descriptive labels on each side using the tabindex attribute for keyboard accessibility:

Vertical Divider

Set direction="vertical" to split the images top and bottom:

Vertical split mode — drag up/down.

Multiple Independent Sliders

Three separate comparisons on the same page — each slider is independent:

Usage

---
title: My Post
img_comparison: true
---

import Figure from '@components/Figure.astro';

<img-comparison-slider>
  <Figure slot="first"  path="/assets/img/before.jpg" alt="Before" zoomable={false} />
  <Figure slot="second" path="/assets/img/after.jpg"  alt="After"  zoomable={false} />
</img-comparison-slider>

Set zoomable={false} on the inner Figure components — medium-zoom is not compatible with the comparison slider and should be disabled for these images.

CSS custom properties for styling:

Property	Default	Description
`--divider-width`	`2px`	Thickness of the divider line
`--divider-color`	`white`	Colour of the divider
`--default-handle-opacity`	`1`	Handle opacity when not hovering