UnreviewedAny data-* attribute is forwarded to the rendered element.
Any aria-* attribute is forwarded to the rendered element.
Optional UnreviewedlabelVisible field label, shown above the rail. A string supplies the slider's
accessible name; give a rich label an explicit aria-label.
Optional UnreviewedvalueControlled numeric value. A pair selects a range, ordered low to high.
Omit or pass undefined for uncontrolled use; 0 stays controlled.
Runtime null is treated as omission; it is not a controlled empty value.
Takes precedence over defaultValue, including on form reset. Values are
clamped to the bounds and rounded to a step measured from min.
Releasing control retains the last applied value. There is no empty numeric state.
Optional UnrevieweddefaultInitial uncontrolled value and form-reset baseline. Changes while pristine
update the value; after interaction they affect the next reset. Without a
default, scalar reset uses min and range reset uses [min, max].
Optional UnreviewedminLowest permitted value and step origin. Nonfinite values use 0.
Optional UnreviewedmaxHighest permitted value. A lower bound than min collapses the range to
min. Nonfinite values use 100.
Optional UnreviewedstepSmallest keyboard and drag increment. Nonpositive and nonfinite values use 1. Page keys move by at least one step, or one tenth of the range.
Optional UnreviewednameForm field name. A range submits two values under this name.
Optional UnrevieweddisabledDisables pointer and keyboard interaction.
Optional UnreviewedtoneColor of the filled rail. Pass a named tone or a literal CSS color for a one-off custom tone. The unfilled rail stays neutral.
Optional UnreviewedthumbColor of the thumb stroke. Pass a named tone or a literal CSS color for a
one-off custom tone. An explicit neutral keeps the thumb neutral in every theme.
Optional UnreviewedsizeSize variant. small=24px, medium=28px, large=32px tall.
Optional UnreviewedtrackThickness of both rail segments. Numbers use pixels; strings are CSS lengths. Keep it no larger than the thumb diameter.
Optional UnreviewedthumbDiameter of the thumb. Numbers use pixels; strings are CSS lengths. Keep
it at least as large as trackSize.
Optional UnreviewedthumbFill the thumb with its resolved border color. This follows thumbTone
and interactive states.
Optional UnreviewedroundFully round the rail and thumb. Pass a number (px) or CSS length string for a shared custom radius.
Optional UnreviewedvalueWhere the live value appears. end puts it at the right edge of the label
row. inline renders Label: value. thumb keeps it above the thumb.
Optional UnreviewedvalueText inserted before the live numeric value, such as $.
Optional UnreviewedvalueText inserted after the live numeric value, such as % or °C.
Optional UnreviewedmarkersCompact text labels positioned below the rail. They do not add dots or ticks to the rail.
Optional UnreviewedtrackControls what happens when the rail is pressed. drag-only starts dragging
from the current value. jump first moves to the pressed position.
Optional UnreviewedinvertedFill the rail outside the selected value or range.
Optional UnreviewedonReports each distinct requested value during a drag and each keyboard step.
onInput runs first. The snapshot contains the requested value and effective
constraints; the element's value remains the applied value. Controlled
sliders accept by updating value and reject by leaving it unchanged.
Events are notifications; preventDefault() does not veto a value request.
Optional UnreviewedonReports the final requested value after a drag, cancellation, or capture loss,
and after each keyboard step. onChange runs first. A drag ending at its
starting value is silent. Controlled requests can commit without being accepted.
Uncontrolled form reset emits both callbacks when it changes the value;
state restoration and application updates are silent.
Optional UnreviewedclassAdds CSS classes to the root element and preserves its existing classes.
Optional UnreviewedstyleInline CSS styles on the root element.
Optional UnreviewedchildrenContent to render in place of any default content.
Optional UnreviewedidHTML id attribute.
Optional UnreviewedtitleHTML title attribute, shown as a browser tooltip on hover.
Optional UnreviewedslotNamed slot in a parent web component, such as slot="header" in a <Dialog>.
Optional UnreviewedtabTab order. Set to -1 to skip the element when tabbing.
Optional UnreviewedkeyReact/Preact reconciliation key when rendered inside a list. Consumed by the JSX runtime (not forwarded as a DOM attribute).
OptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalonOptionalon
Common props for JSX component wrappers.