All components (204)

Image comparison

Commerce · ImageCompare · .amset-compare

What it is and when to use it

Before and after: two images of the same framing, one on top of the other, and a divider that is dragged to see more of one or the other.

When to use it

A repair, a cleaning, a restoration or a redesign: the jewel before and after polishing, the old record and the new one.
The old one stays on the left and the new one on the right. The value (value and onChange, or initialPosition if uncontrolled), from 0 to 100, is how much of the before image is visible: at 0 only the new one is there; at 100, only the old one.
beforeLabel and afterLabel change the captions in the corners; beforeLabel also goes into the divider's name.
ratio sets the shape of the box, in CSS format (16 / 9 by default): both images fill it by cropping, without distortion.

When not to

Different photos of the same product: Gallery.
Choosing a number from a range: Slider.

Keyboard: Tab reaches the thumb. The arrows move it one at a time, Page Up and Page Down ten at a time, and Home and End take it to the ends.

Accessibility: the divider is a real <input type="range">, hidden under the thumb that is seen. When moved it announces the percentage, and its name says what it is about: "Compare the ring before and after polishing. Visible part of Before". Both images carry their alt (required) and both are in the DOM: the comparison is the information. The captions in the corners are visual only (aria-hidden).

Context: it goes inside LocaleProvider (or AmsetProvider), which writes the percentage ("52%").

Fine-tuning: CSS variables --amset-compare-*: -caption, -line, -radius, -thumb, -thumb-icon. The size moves the thumb, its icon, the line and the caption.

What it looks like

Before and after. Visible part of Before

<ImageCompare
  label="Before and after"
  before={{ src: '/antes.jpg', alt: 'Before' }}
  after={{ src: '/despues.jpg', alt: 'After' }}
/>

Props

Import it with import { ImageCompare } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`after`required	`ComparedImage`	—
`before`required	`ComparedImage`	—
`label`required	`string`	What the comparison is about. Required: it names the separator.
`afterLabel`	`string`	Name of the after side. It only appears in its caption, which is decorative: the reader gets it through the image's `alt`, not through the separator.
`beforeLabel`	`string`	Name of the before side. It appears in its caption and goes into the name of the separator ("Visible part of Before"), because the value measures how much of this image is shown. What is read while moving is only the percentage.
`className`	`string`	Merged with the library classes; it does not replace them.
`initialPosition`	`number`	—
`onChange`	`(position: number) => void`	—
`ratio`	`string`	Proportion of the box, in CSS format.
`size`	`"sm" \| "md" \| "lg"`	—
`value`	`number`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-compare-radius`	`var(--amset-radius)`
`--amset-compare-caption`	`var(--amset-text-xs)`
`--amset-compare-line`	`2px`
`--amset-compare-thumb`	`2.25rem`
`--amset-compare-thumb-icon`	`1.125rem`

How to change it

.amset-compare {
  --amset-compare-radius: ...;
  --amset-compare-caption: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: