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

active

Type: boolean

color

Type: stringDefault: #ffffffCSS Variable: --spx-image-comparison-color

height

Type: stringDefault: 100%CSS Variable: --spx-image-comparison-height

icon-color

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

lazy

Type: boolean

Lazy load images.

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.

steps

Type: numberDefault: 10

Step amount when using component with arrow keys.

Events

spxImageComparisonDidLoad

Fires after component has loaded.