Comparison
Before/after image comparison slider.
<rhx-comparison>
Examples
Before / After
<rhx-comparison
rhx-before="https://picsum.photos/id/10/600/400"
rhx-before-alt="Original photo"
rhx-after="https://picsum.photos/id/10/600/400?grayscale"
rhx-after-alt="Grayscale version" />Custom Position
<rhx-comparison
rhx-before="https://picsum.photos/id/10/600/400"
rhx-before-alt="Original photo"
rhx-after="https://picsum.photos/id/10/600/400?grayscale"
rhx-after-alt="Grayscale version"
rhx-position="25" />Properties
| Property | Type | Default | Description |
|---|---|---|---|
rhx-before |
string |
- |
URL of the "before" image |
rhx-before-alt |
string |
- |
Alt text for the before image |
rhx-after |
string |
- |
URL of the "after" image |
rhx-after-alt |
string |
- |
Alt text for the after image |
rhx-position |
int |
50 |
Initial handle position as percentage |
Accessibility
- The slider handle has
role="slider"witharia-valuenowreflecting the current position percentage. - Keyboard arrow keys adjust the slider position for users who cannot use a mouse or touch.
- Both the before and after images have descriptive
alttext for screen readers.