Before After

Basic Usage

Drag the divider to compare two images. Default position is 50%.

<before-after>
  <img slot="before" src="grayscale.jpg" alt="Before">
  <img slot="after" src="color.jpg" alt="After">
</before-after>

Different Image Sizes

Images with different dimensions. The container adapts to fit both without gaps.

<before-after>
  <img slot="before" src="photo-800x500.jpg" alt="Before">
  <img slot="after" src="photo-800x600.jpg" alt="After">
</before-after>

Custom Initial Position

Start with the divider at 25%.

<before-after position="25">
  <img slot="before" src="grayscale.jpg" alt="Before">
  <img slot="after" src="color.jpg" alt="After">
</before-after>

Custom Labels

Customize the before and after labels.

<before-after before-label="Original" after-label="Edited">
  <img slot="before" src="original.jpg" alt="Original">
  <img slot="after" src="edited.jpg" alt="Edited">
</before-after>

Hover Mode

The divider follows the mouse without clicking.

<before-after hover-mode hide-labels>
  ...
</before-after>

Custom Styles

Customize divider color, handle size, and label appearance via CSS custom properties.

<before-after style="
  --before-after-divider-color: #ff6600;
  --before-after-divider-width: 4px;
  --before-after-handle-size: 48px;
  --before-after-handle-color: #ff6600;
  --before-after-label-bg: rgba(255, 102, 0, 0.8);
">
  ...
</before-after>

Disabled State

The slider is disabled and cannot be interacted with.

<before-after disabled position="35">
  ...
</before-after>

Programmatic Control

Control the position programmatically and listen for events.

Events will appear here...

const el = document.querySelector('before-after');
el.position = 75;

el.addEventListener('before-after-change', (e) => {
  console.log('Position:', e.detail.position);
});

Keyboard Navigation

Focus the slider and use the keyboard to control it:

Arrow Left / Arrow Right — move 1%
Page Up / Page Down — move 10%
Home — go to 0%
End — go to 100%