Usage #
Examples #
Basic #
Compare is composed with Compare as the root, two CompareItem layers, and a CompareHandle containing the keyboard-accessible CompareIndicator.
Custom Handle #
The handle can be styled freely — give the indicator a rounded background, custom icon, and shadow for a more prominent look.
Hover #
Enable slideOnHover to update the slider position by hovering over the component.
Vertical #
Set orientation to vertical for a vertical comparison layout.
With Chart #
Combine slideOnHover with controlled value for interactive chart reveals.
Controlled #
Bind the value with v-model when external UI needs to stay in sync with the slider.
Template #
Compare is not limited to images — any content can be placed inside the items for creative comparisons.
Accessibility #
Screen Reader
Compare uses a hidden range input for keyboard accessibility. The input supports aria-label, aria-labelledby, aria-valuemin, aria-valuemax, and aria-valuenow attributes. Use arrow keys to adjust the slider position.
Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus to the component. |
| left arrowup arrow | Decrements the value. |
| right arrowdown arrow | Increments the value. |
| home | Set the minimum value. |
| end | Set the maximum value. |
| page up | Increments the value by a browser-defined larger step (approximately 10% of the range). |
| page down | Decrements the value by a browser-defined larger step (approximately 10% of the range). |