Comparison
<cs-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 this component, use one of the following snippets.
import '@cruglobal/cornerstone-components/components/comparison/comparison.js';
import './cornerstone/components/comparison/comparison.js';
import CsComparison from '@cruglobal/cornerstone-components/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.
| Property | Attribute | Description | Type | Default | Reflects |
|---|---|---|---|---|---|
position | position | The position of the divider as a percentage. | number | 50 | Yes |
Events
Learn more about events.
| Name | Description |
|---|---|
change | Emitted when the position changes. |
CSS Custom Properties
Learn more about CSS custom properties.
| Name | Description | Default |
|---|---|---|
--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) |
Dependencies
This component automatically imports the following elements. Sub-dependencies, if any exist, are included in this list.