endLabel | LocalizedMessage | — | Name of the end thumb, for example "Maximum price". |
startLabel | LocalizedMessage | — | Name of the start thumb, for example "Minimum price". |
aria-describedby | string | — | Id of the element that describes the slider. |
aria-label | LocalizedMessage | — | Accessible name of the group, for example "Price range".
Accessible name of the group.
Accessible name of the group, used instead of label. |
aria-labelledby | string | — | Id of an element that also names the group.
Id of the element that names the group.
Id of an element that names the group, used instead of label. |
className | string | — | Classes on the host element. Put overrides in @layer chroma.overrides. |
defaultValue | readonly [start: number, end: number] | — | Initial [start, end] when uncontrolled, and the value a form reset restores. Defaults to [min, max]. |
disabled | boolean | — | Ignores input, leaves the tab order, and omits both values from form submission. |
form | string | — | Id of the form the values belong to when the slider sits outside it. |
formatValue | ((value: number) => string) | — | Formats each value for the readout and the value bubbles, for example to add a unit. Defaults to Intl.NumberFormat
in locale with the decimals of step, and the bubble's digits roll. With formatValue the bubble shows the text
you return as plain text with no roll. |
formatValueText | ((value: number) => string) | — | Formats each value for aria-valuetext only, when the spoken text should differ from the visible text (for example
a duration read as words while the readout shows 1:30). Defaults to the formatValue text, or the default format. |
label | LocalizedMessage | — | Visible label above the track, at the inline start of the header row. It also names the group unless
aria-label or aria-labelledby is set.
Visible label above the track. It names the group unless aria-label or aria-labelledby is set. |
locale | string | — | BCP 47 locale for the default value format. Defaults to the runtime locale, so a server rendered app that must
match the client passes it explicitly. Ignored when formatValue is set. |
max | number | — | Largest selectable value. Defaults to 100. |
min | number | — | Smallest selectable value. Defaults to 0. |
minStepsBetweenThumbs | number | — | Fewest steps that must separate the two thumbs. Defaults to 0. |
name | string | — | Field name. The start and end values are submitted under it in that order. |
onBlur | FocusEventHandler<HTMLElement> | — | Called once when focus leaves the whole slider for somewhere outside it, such as the next field. It is not called
when focus moves between thumbs, so a form library validates on blur once per visit. |
onFocus | FocusEventHandler<HTMLElement> | — | Called once when focus enters the slider from outside it. It is not called when focus moves between thumbs or a
press on the track moves a focused thumb. Use it with onBlur to track whether the field was touched. |
onValueChange | ((value: RangeSliderValue, details: ChangeDetails<RangeSliderValueChangeReason>) => void) | — | Called for every value change from pointer, keyboard, or form reset. Cancel the details to keep the old value. |
orientation | SliderOrientation | — | Axis of the slider. Defaults to {@link SliderOrientation.Horizontal}. |
ref | Ref<HTMLDivElement> | — | Ref to the host element. |
showValue | boolean | — | Whether the header row shows both live values at its inline end, start then end, in tabular numerals. Defaults to
true when label is set and false otherwise; set it to true with no label for a readout on its own. |
step | number | — | Increment between selectable values, counted from min. Must be greater than 0. Defaults to 1. |
ticks | readonly SliderTick[] | — | Marks along the track, each with an optional label. They never move a thumb or change the value. |
value | readonly [start: number, end: number] | — | Controlled [start, end]. undefined on the first render is uncontrolled. Shown sorted and clamped into the range. |