StellarUI

<stellar-slide-activator>

Drag-to-confirm control with a unidirectional slide, progress events, and programmatic reset.

Reset

Progress: 0% State: ready

Copy

<stellar-slide-activator
  label="Slide to activate"
  activated-label="Activated"
>
</stellar-slide-activator>

Complete props, events, slots, and implementation notes for the shipped slide-activator.

Prop	Type	Default	Notes
`label`	`string`	`''`	Plain-text resting label. Use the `label` slot when the copy needs markup.
`activated-label`	`string`	`''`	Plain-text label shown after activation. Falls back to the resting label when omitted.
`activated`	`boolean`	`false`	Reflects the locked activated state. Remove it programmatically to reset the control.
`disabled`	`boolean`	`false`	Disables dragging, keyboard activation, and focus.
`attention`	`boolean`	`false`	Adds a subtle shimmer hint to the track until the control is activated or disabled.
`thumb-icon`	`string`	`"mdi:chevron-double-right"`	Icon name used for the resting thumb face when the `thumb` slot is empty.
`activated-thumb-icon`	`string`	`"mdi:check"`	Icon name used for the activated thumb face when the `activated-thumb` slot is empty.

Event	Source	Notes
`before-activate`	`stellar-slide-activator`	Cancellable event fired before the control locks into its activated state.
`activate`	`stellar-slide-activator`	Emitted after activation succeeds.
`before-deactivate`	`stellar-slide-activator`	Cancellable event fired before programmatic reset.
`deactivate`	`stellar-slide-activator`	Emitted after programmatic reset succeeds.
`progress`	`stellar-slide-activator`	Emitted while the thumb moves. `event.detail.percent` is a number from `0` to `1`.

Slot	Notes
`label`	Visible resting-state label. Use this when the track label needs markup instead of plain text.
`activated-label`	Visible activated-state label. Use this when the success state needs different markup.
`thumb`	Optional resting thumb markup. Overrides `thumb-icon`.
`activated-thumb`	Optional activated thumb markup. Overrides `activated-thumb-icon`.

The public tag is `stellar-slide-activator`, matching the shipped drag-to-confirm boundary instead of collapsing it into a button variant.
Activation is intentionally one-way for users. They can drag or hold the matching key to activate, but reset is programmatic by setting `activated` back to false.
`progress` emits a `percent` value from `0` to `1` as the thumb moves, and the host exposes that same value through the read-only `--thumb-position` CSS variable.
Use `thumb-icon` and `activated-thumb-icon` for the simple icon-name path, or the `thumb` and `activated-thumb` slots when the thumb faces need custom markup.