DEVELOPER REFERENCE · v4.0.0

SliderField API

Props, callbacks and methods. Select an underlined type to explore its fields, allowed values and callback arguments.

SliderField16 props3 callbacks0 methods

Props16

SliderField props
Name	Type	Description
`label`Required	`string`	Label content or accessible name for the component, as rendered by this control.
`layout`Optional	`"inline" \| "stacked" \| undefined`	Places the slider label and control inline or in a vertical stack.
`valuePlacement`Optional	`"none" \| "end" \| "thumb" \| undefined`	Positions the displayed slider value at the end, on the thumb, or hides it.
`formatValue`Optional	`((value: number) => string) \| undefined`Inspect type	Formats the numeric value for display without changing its stored value.
`ticks`Optional	`number \| undefined`	Number of evenly spaced decorative tick marks, bounded to 2–101.
`accentColor`Optional	`string \| undefined`	CSS color used for the active slider track and thumb.
`min`Required	`number`	Minimum permitted value or lower bound for the control.
`max`Required	`number`	Maximum permitted value or upper bound for the control.
`value`Required	`number`	Value to display or edit. The declared type identifies the supported representation; change callbacks describe how edited values are emitted.
`step`Optional	`string \| number \| undefined`	Increment used for value changes. Use a value compatible with the control type.
`disabled`Optional	`boolean \| undefined`	Disables user interaction with the control.
`id`Optional	`string \| undefined`	Identifier used to associate the control with labels, popup content or other elements.
`className`Optional	`string \| undefined`	Additional CSS classes applied to the component root.
`ariaLabel`Required	`string`	Accessible name announced by assistive technology.
`ariaValueText`Optional	`string \| undefined`	Human-readable equivalent of the numeric value for assistive technology.
`ariaDescribedBy`Optional	`string \| undefined`	Space-separated IDs of elements that describe this control.

Events and callbacks3

SliderField events and callbacks
Name	Type	Description
`onChange`Required	`(value: number, event: Event & { currentTarget: HTMLInputElement; }) => void`Inspect type	Receives the new value when the user changes the control. Update the corresponding value prop for controlled use.
`onCommit`Optional	`((value: number, event: Event & { currentTarget: HTMLInputElement; }) => void) \| undefined`Inspect type	Called when an editing gesture commits its value, rather than on every intermediate change.
`onKeyDown`Optional	`((event: KeyboardEvent) => void) \| undefined`Inspect type	Handles keyboard input; receives the keyboard event and any item/date context shown in the signature.

Methods0

No component-specific imperative methods. Use props and callbacks to control this component.