StellarUI

<stellar-range>

Copy

<stellar-range
  label="Volume"
  description="Adjust the playback level."
  value="40"
  min="0"
  max="100"
  step="1"
>
</stellar-range>

Complete props, events, slots, and implementation notes for the shipped range input.

Prop	Type	Default	Notes
`tone`	`neutral \| primary \| secondary \| tertiary \| error`	`neutral`	Sets the progress color and thumb contrast.
`size`	`xs \| sm \| md \| lg \| xl`	`md`	Scales the thumb and track height.
`markers`	`boolean`	`false`	Draws built-in step markers derived from `min`, `max`, and `step`.
`tooltip`	`boolean`	`false`	Shows a built-in value tooltip while the slider has focus.
`disabled`	`boolean`	`false`	Disables the inner native range input.
`label`	`string`	`''`	Fallback text for the `label` slot above the control.
`description`	`string`	`''`	Fallback text for the `description` slot below the control.
`references`	`string`	`''`	Pipe-separated fallback text for the `reference` slot, for example `Low\|Medium\|High`.
`value`	`string`	`50`	Current range value mirrored through the host `value` property.
`min`	`string`	`0`	Native minimum value.
`max`	`string`	`100`	Native maximum value.
`step`	`string`	`1`	Native step size.

Event	Source	Notes
`input` / `change`	host	Redispatched from the inner native `<input type="range">`.
`focus` / `blur`	native	Use normal DOM listeners on the custom element.
custom events	none	`stellar-range` does not emit custom events.

Slot	Notes
`label`	Optional content above the control. Overrides the `label` prop when present.
`description`	Optional helper content below the control. Overrides the `description` prop when present.
`reference`	Optional visual references below the slider. Overrides the `references` prop when slotted content is present.

The public tag is `stellar-range`, backed by a real native `<input type="range">`.
The shipped API stays small: `tone`, `size`, `markers`, `tooltip`, `disabled`, `label`, `description`, `references`, `value`, `min`, `max`, and `step`.
`stellar-range` uses the same field metadata pattern as the other input controls, so labels and helper text line up without docs-only wrappers.
`required`, `aria-invalid`, and `custom-validity` forward to the inner native range input for validation-sensitive flows.
The host exposes `setCustomValidity()`, `checkValidity()`, `reportValidity()`, `validity`, `validationMessage`, and `willValidate`, so app code can use native-like validity APIs on the custom element.
For Datastar, prefer `data-attr:custom-validity="..."` on the custom element host instead of the Pro-only `data-custom-validity` attribute.
Use `data-bind:value` when binding the slider value from Datastar.
The component now follows the shape more closely: markers are visual geometry, references are slotted content, and tooltip is a separate built-in feature.
Host-level CSS vars like `--range-bg`, `--range-thumb`, and `--range-fill` can override the default track and fill treatment for advanced styling.
The visual baseline follows the shipped range thumb sizing and filled-track treatment with direct Stellar token mapping.