Image Comparison

Available as: Web ComponentShortcodeOxygen Element

Compare two images visually using a slider. Handy for showing subtle (or not so subtle) before/after differences.

<spx-image-comparison src-before="https://source.unsplash.com/random/1200x300" src-after="https://source.unsplash.com/random/1201x300" height="300px"> </spx-image-comparison>

Properties

color

Type: stringDefault: '#ffffff'CSS variable: --spx-image-comparison-color

Component color property.

height

Type: stringDefault: '100%'

icon-color

Type: stringDefault: 'var(--spx-color-gray-900)'CSS variable: --spx-image-comparison-icon-color

Icon color.

loading

Type: "auto" | "eager" | "lazy"

Lazy load attribute.

src-after

Type: stringDefault: 'https://source.unsplash.com/random/1200x300'

Image URL of the before image.

src-before

Type: stringDefault: 'https://source.unsplash.com/random/1201x300'

Image URL of the after image.

start

Type: numberDefault: 150

Opening state in pixels.

Events

spxImageComparisonDidLoad

Fires after component has loaded.

Methods

reload

Reload component.