Slider

Visible label naming the quantity ("Volume", "Price range").

Accessibility: The label is a Text `<span>` with an id, not a native `<label for>` (which cannot name a `div role=slider`); a single thumb takes aria-labelledby pointing at it (on Lit the span is in the same shadow root, so the id reference holds). A range slider's thumbs are named with aria-label (accessibilityLabel on native) set to the resolved `copy.minimumLabel` / `copy.maximumLabel`, with no hidden spans.

Field name for the Form. The form value types (web/rn FormContext, Lit DsFormField) have no number, so a single value registers as its decimal string (`String(value)`) and a range as two strings `[String(low), String(high)]`; native form submission gets one hidden input (web) or FormData entry (Lit) per string, all under this name. The registration id and the Form's focus-on-error target is the thumb, the low thumb for a range (its first tab stop); a consumer-supplied `id` lands there too, and the high thumb carries no id.

Lower bound.

Upper bound.

Arrow-key increment and snapping granularity for drag, click and keys. The step grid is anchored at `min` (`min + round((raw - min) / step) * step`); when `(max - min)` is not a whole number of steps the last partial step still snaps to `max`, so the maximum is reachable by drag and click and not only by End.

With `marks`, snap drag and click to the marks instead of `step` (arrow keys still move by step; PageUp/Down go to the next mark, and past the last mark to `max`/`min`). This is the only switch for mark snapping: omitting `step` changes nothing, since it defaults to 1. Set without any `marks` the flag is inert — drag and click fall back to the step grid and PageUp/Down to ten steps.

Must have a value other than the default to submit (`copy.required`). "The default" is `defaultValue` when set and otherwise what `value` itself falls back to — `min`, or `[min, max]` for a range — clamped to [min, max] before comparing, so required and value share one notion of it. For a range, a difference in either component of the pair satisfies it: moving one thumb is enough. The label takes no "(required)" suffix here: a slider always shows a value, so the suffix would say nothing about what is missing. Required is a validity flag (valueMissing, message `copy.required`) checked before invalid, but its message is not rendered standalone: the error region shows `error`, else the message a Form (or `validate`) has reported, else `copy.invalid` when `invalid`.

Marks the slider invalid (`copy.invalid` when no `error`). There is no invalid colour for the track: a slider has no text to recolour and no border of its own, so the state is carried by aria-invalid and the error message. `invalid` and `error` are independent: aria-invalid is true when either is set, and setting or clearing `error` never changes the `invalid` prop — so error identification is asserted on `aria-invalid="true"` on the thumb (the element carrying the role), never on the `invalid` prop.

Controlled value; for a range, a two-number array.

Initial value (or pair). Defaults to `min` (or `[min, max]`).

Two thumbs choosing a minimum and a maximum; the thumbs cannot cross. A mismatch between `range` and the shape of `value`/`defaultValue` (`range: true` with a number, or a pair without `range`) falls back silently to that mode's default — `[min, max]` for a range, `min` for one thumb — with no development warning; only `max <= min` warns.

Renders the displayed and announced value ("$40", "3 h 20 min"). Defaults to the number. `aria-valuetext` is always emitted, including in the default case where it repeats `aria-valuenow`.

Where the value text appears: always beside the label, only while dragging or focused (as a bubble above the thumb), or not at all (when a NumberInput beside the slider shows it). Despite its name, `hover` means pressed or focused: plain pointer hover does not show the bubble, and touch platforms behave identically. Any focus counts (not only :focus-visible), including focus a pointer press moves to the thumb; on React Native a core View reports focus only under react-native-web, so on a device the bubble is press-only. The bubble element exists only under `hover` — `always` shows the value beside the label and never a drag bubble. A range renders one bubble per thumb, each shown only while its own thumb is pressed or focused; every bubble is aria-hidden (active or not), since the thumb's aria-valuetext already announces the same value, and the inactive one stays rendered at opacity 0 so `transition` can fade it. The bubble sizes to its content on one line, centred on the thumb; it is not constrained by the thumb's hit area and may overflow it.

Tick marks on the track, optionally labelled. Values snap to marks only with `snapToMarks`. Generated code exports the entry type as `SliderMark`. The dots are the `tickMarks` part (aria-hidden): a layer on the track centre line inside the track area. The labels sit in an unparted aria-hidden row below the track area (see `markLabelGap`); each label is a Text (size xs, tone muted, element span) centred under its mark by a 50% offset (mirrored in right-to-left). There is no collision handling and no clamping at the ends: labels on close marks may overlap, and the labels at `min` and `max` hang past the track. Presses on the label row do not move a thumb — the label row and the mark label row paint above the thumbs and take the press, which is also how the overlap with a thumb's `minTarget` hit area is resolved.

Not adjustable, still readable: thumbs stay focusable but pointer, keys and accessibility actions are ignored, and no value is submitted (on Lit `currentValue` is null while disabled). A slider disabled by an enclosing Form or Fieldset (Lit formDisabledCallback) behaves the same. On React Native the thumb View keeps `accessible` and sets accessibilityState.disabled.

Helper text.

Error message. `error` is not in `form.validation`, so it is reported as a custom validity (web `setCustomValidity`, Lit `setValidity({ customError: true }, error)`) and blocks submission like the listed flags; the validity message follows the precedence `error`, then `copy.required`, then `copy.invalid`.

Fired on every value change while dragging or with keys (number or pair); only when the value actually changed, so a key at a bound or a click on the thumb fires nothing. Within one interaction the comparison is against the last value emitted, not the displayed value, so a controlled owner that never updates `value` gets each new target once; the displayed value resets from the prop on render.

Fired once when the interaction ends (pointer up, key released), and only if that interaction changed the value (End at max or a click on the thumb fires nothing). Use for expensive effects.