Props
| Prop | Type | Default | Notes |
|---|---|---|---|
position | number | 0.5 | |
orientation | horizontal | vertical | horizontal | |
disabled | boolean | false |
StellarUI
<stellar-comparison>
draggable comparison surface with start/end slots, keyboard adjustment, and an optional custom handle icon.
Properties
Preview
BEFORE
AFTER
Markup
<stellar-comparison style="max-width:42rem;aspect-ratio:16 / 10;">
<div slot="start" style="display:grid;place-content:center;inline-size:100%;block-size:100%;background:linear-gradient(135deg, var(--primary-7), var(--primary-9));color:var(--primary-10-on);font-size:clamp(2rem, 8vw, 5rem);font-weight:800;letter-spacing:0.08em">BEFORE</div>
<div slot="end" style="display:grid;place-content:center;inline-size:100%;block-size:100%;background:linear-gradient(135deg, var(--neutral-1), var(--neutral-3));color:var(--neutral-12);font-size:clamp(2rem, 8vw, 5rem);font-weight:800;letter-spacing:0.08em">AFTER</div>
</stellar-comparison>API
Complete props, events, slots, and implementation notes for the shipped comparison surface.
Events
| Event | Source | Notes |
|---|---|---|
input | host | Dispatched whenever dragging or keyboard input changes the divider position so live bindings can track the current value. |
change | host | Also dispatched whenever the divider position changes. |
Slots
| Slot | Notes |
|---|---|
start | The leading or top comparison surface, clipped by the current divider position. |
end | The trailing or bottom comparison surface shown behind the clipped start surface. |
handle-icon | Optional custom icon rendered inside the draggable handle. |
Notes
- The public tag is `stellar-comparison`, matching the component's comparison component rather than the older diff surface.
- The shipped API uses `position`, `orientation`, and `disabled`, plus native start/end slots and an optional `handle-icon` slot.
- The divider is keyboard accessible with arrow keys, `Home`, and `End`, and it emits standard `input` and `change` events whenever the position changes.
- The component supports RTL behavior for horizontal comparisons and keeps the same slider semantics across directions.
- `stellar-diff` remains a separate older surface. `stellar-comparison` is the canonical reset layout component.