StellarUI

<stellar-splitter>

draggable splitter for resizing two authored panels with keyboard support, snap points, and optional custom handle content.

Component

Example

Start

Give the start panel a min width with --divider-min-position and add snap points when specific layouts matter.

End

The component only owns the resize interaction and divider treatment. The two panels remain normal authored content.

Copy

<stellar-splitter
  position="0.4"
  snap="[25,50,75]"
>
  <div slot="start">Start panel</div>
  <div slot="end">End panel</div>
</stellar-splitter>

Complete props, events, slots, and implementation notes for the shipped splitter surface.

Prop	Type	Default
`position`	`number`	`0.5`
`orientation`	`horizontal \| vertical`	`horizontal`
`disabled`	`boolean`	`false`
`snap`	`array`	`[]`
`snap-threshold`	`number`	`10`

Event	Source	Notes
`input`	host	Dispatched whenever drag or keyboard input changes the divider position so live bindings can track the current value.
`change`	host	Also dispatched whenever the divider position changes.

Slot	Notes
`start`	Primary panel content.
`end`	Secondary panel content.
`handle`	Optional custom divider handle content.

The public tag is `stellar-splitter`, matching the component's authored two-panel splitter instead of inventing a container-specific API.
`position`, `orientation`, `disabled`, `snap`, and `snap-threshold` are the full prop surface.
The divider is keyboard accessible with arrow keys, `Home`, `End`, and `Enter`. `Enter` collapses to zero and then restores the previous position on the next press.
`input` fires whenever drag or keyboard input changes the divider position, and `change` fires alongside it.
The default handle stays minimal on purpose. Use the `handle` slot only when you need custom affordance content beyond the standard bar.
Use the CSS custom properties when a layout needs hard min/max panel constraints or a larger draggable target than the visible rule.