Since Shoelace 2.0 Code stable

Image Comparer

sl-image-comparer

Compare visual differences between similar photos with a sliding panel.

Examples

Basic Image Comparer

For best results, use images that share the same dimensions. The slider can be controlled by dragging or pressing the left and right arrow keys. (Tip: press shift + arrows to move the slider in larger intervals, or home + end to jump to the beginning or end.)

Grayscale version of kittens in a basket looking around. Color version of kittens in a basket looking around. 
<sl-image-comparer>
  <img
    slot="before"
    src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80&sat=-100&bri=-5"
    alt="Grayscale version of kittens in a basket looking around."
  />
  <img
    slot="after"
    src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
    alt="Color version of kittens in a basket looking around."
  />
</sl-image-comparer>

sl-image-comparer
  img slot="before" src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80&sat=-100&bri=-5" alt="Grayscale version of kittens in a basket looking around."
  img slot="after" src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="Color version of kittens in a basket looking around."

Initial Position

Use the position attribute to set the initial position of the slider. This is a percentage from 0 to 100.

A person sitting on bricks wearing untied boots. A person sitting on a yellow curb tying shoelaces on a boot. 
<sl-image-comparer position="25">
  <img
    slot="before"
    src="https://images.unsplash.com/photo-1520903074185-8eca362b3dce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&q=80"
    alt="A person sitting on bricks wearing untied boots."
  />
  <img
    slot="after"
    src="https://images.unsplash.com/photo-1520640023173-50a135e35804?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"
    alt="A person sitting on a yellow curb tying shoelaces on a boot."
  />
</sl-image-comparer>

sl-image-comparer position="25"
  img slot="before" src="https://images.unsplash.com/photo-1520903074185-8eca362b3dce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&q=80" alt="A person sitting on bricks wearing untied boots."
  img slot="after" src="https://images.unsplash.com/photo-1520640023173-50a135e35804?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="A person sitting on a yellow curb tying shoelaces on a boot."

Component Props

Property Default Details
position 50

number

The position of the divider as a percentage.
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Slots

Name Details
before The before image, an <img> or <svg> element.
after The after image, an <img> or <svg> element.
handle The icon used inside the handle.

Learn more about using slots.

Events

Name Name Name React Event Details
sl-change sl-change sl-change onSlChange

Emitted when the position changes.

Learn more about events.

Custom Properties

Name Details
--divider-width

The width of the dividing line.
--handle-size

The size of the compare handle.

Learn more about customizing CSS custom properties.

CSS Parts

Name Description
base The component’s base wrapper.
before The container that wraps the before image.
after The container that wraps the after image.
divider The divider that separates the images.
handle The handle that the user drags to expose the after image.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <sl-icon>