DEVELOPER REFERENCE · v4.0.0

SingleValueSlider API

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

SingleValueSlider10 props3 callbacks0 methods

SingleValueSlider props
Name	Type	Description
`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.

SingleValueSlider 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.

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