StellarUI

<stellar-joystick>

Recent events cartesian

No events yet.

Copy

<stellar-joystick label="Movement joystick">
  <stellar-icon slot="thumb" name="mdi:drag"></stellar-icon>
</stellar-joystick>

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

Prop	Type	Default
`label`	`string`	`''`
`disabled`	`boolean`	`false`
`mode`	`normal \| sticky`	`normal`
`dead-zone`	`number`	`0`

Event	Source	Notes
`before-start`	host	Cancelable. `event.detail` includes `angle`, `distance`, `x`, and `y`. `angle` is normalized from `0` to `1` starting at positive x and increasing counterclockwise.
`start`	host	Fires once dragging begins with the current normalized detail payload.
`move`	host	Fires continuously during pointer movement.
`before-stop`	host	Cancelable. In `normal` mode the detail payload is centered; in `sticky` mode it is the last position.
`stop`	host	Fires after the drag ends.

Slot	Notes
`thumb`	Optional content rendered inside the movable thumb, typically a `stellar-icon`.

The public tag is `stellar-joystick`, a drag-only directional control with normalized `x`/`y` output.
`before-start` and `before-stop` are cancelable host events; `start`, `move`, and `stop` include `angle`, `distance`, `x`, and `y` in `event.detail`, with `angle` normalized from `0` to `1` starting at positive x and increasing counterclockwise.
`mode="normal"` snaps back to center on release. `sticky` keeps the last position until another drag or a programmatic `reset()`.
`dead-zone` clamps small movements back to center before events are emitted.
The readonly `--distance` custom property tracks the normalized thumb distance from center for advanced styling.