svelte-before-after

A lightweight, accessible before/after image comparison slider for Svelte 5

Built by Jaydeep189 · View on GitHub

Basic Usage

Default configuration with minimal props.

After Before

With Labels

Using beforeLabel and afterLabel snippets to show text badges.

After Before
Before
After

Vertical Mode

Set vertical={true} for top-to-bottom comparison.

After Before
Before
After

Contained Mode

With contain={true} inside a fixed-size container.

After Before
Before
After

Two-Way Binding

The offset prop is bindable. Drag the slider or move the range input below.

After Before
Before
After

Custom Handle Size

The handleSize prop lets you adjust the drag handle.

After Before
Before
After