Comparison
Comparisons show the visual differences between two pieces of similar content using a draggable divider. Use them for before/after images, design revisions, or side-by-side previews.
Compare two pieces of content with a divider users can drag across them. It's most often used for before/after images — for best results, the two sides should share the same dimensions. Any content works, though; see the theme page for a full-UI example.
The divider is keyboard accessible.
Focus it and use the arrow keys — shift + arrow moves in larger steps, and home / end jump to either end.
Examples
Initial Position
Use the position attribute to set the initial position of the slider. This is a percentage from 0 to 100.
API
Importing
If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.
Import this component directly from the CDN:
import 'https://ka-f.webawesome.com/[email protected]/components/comparison/comparison.js';
After installing Web Awesome via npm, import this component:
import '@awesome.me/webawesome/dist/components/comparison/comparison.js';
If you're self-hosting Web Awesome, import this component from your server:
import './webawesome/dist/components/comparison/comparison.js';
To import this component for React 18 or below, use the following code:
import WaComparison from '@awesome.me/webawesome/dist/react/comparison/index.js';
Slots
Learn more about using slots.
| Name | Description |
|---|---|
after
|
The after content, often an <img> or <svg> element. |
before
|
The before content, often an <img> or <svg> element. |
handle
|
The icon used inside the handle. |
Attributes & Properties
Learn more about attributes and properties.
| Name | Description | Reflects |
|---|---|---|
positionposition |
The position of the divider as a percentage.
Type
number
Default
50
|
|
Events
Learn more about events.
| Name | Description |
|---|---|
change |
Emitted when the position changes. |
CSS Custom Properties
Learn more about CSS custom properties.
| Name | Description |
|---|---|
--divider-width |
The width of the dividing line.
|
--handle-size |
The size of the compare handle.
|
Custom States
Learn more about custom states.
| Name | Description | CSS selector |
|---|---|---|
dragging |
Applied when the comparison is being dragged. |
:state(dragging)
|
CSS Parts
Learn more about CSS parts.
| Name | Description | CSS selector |
|---|---|---|
after |
The container that wraps the after content. |
::part(after)
|
before |
The container that wraps the before content. |
::part(before)
|
comparison |
The component's outer wrapper. |
::part(comparison)
|
divider |
The divider that separates the before and after content. |
::part(divider)
|
handle |
The handle that the user drags to expose the after content. |
::part(handle)
|
base |
Deprecated. Use the comparison part instead. |
::part(base)
|
Dependencies
This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.