Slider API

API documentation for Slider component

SliderRoot#

Props#

Defines valid properties in Slider component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: SliderRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: SliderRootInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<SliderRootPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: SliderRootInstance) => ReactNode)	null	The children to render.
disabled	boolean	false	When present, it specifies that the element should be disabled.
invalid	boolean	false	When present, it specifies that the element should be invalid.
onValueChange	(event: SliderRootChangeEvent) => void	null	Callback fired when the ToggleButton's pressed state changes.
onValueChangeEnd	(event: SliderRootChangeEvent) => void	null	Callback fired when the pointer interaction ends.
value	number \| number[]	null	Value of the component.
defaultValue	number \| number[]	null	The default value for the input when not controlled by `value` .
min	number	0	Mininum boundary value.
max	number	100	Maximum boundary value.
orientation	"horizontal" \| "vertical"	horizontal	Orientation of the slider.
step	number	1	Step factor to increment/decrement the value.
minStepsBetweenThumbs	number	0	Minimum steps between thumbs.
readOnly	boolean	false	Whether the component is read-only.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Defines valid state in Slider component.

name	type	default	description
value	number \| number[]	null	Value of the component.
isDragging	boolean	null	Whether the slider is being dragged.

Exposes#

Defines the methods and properties exposed by Slider component.

name	type	default	description
state	useSliderState	null	The state of the useSlider.
range	() => boolean	null	Determines if the slider is in range mode.
getThumbValue	(index: number) => number	null	Returns the value for a specific thumb.
getRangeStyle	() => CSSProperties	null	Returns the style object for the range element.
getThumbStyle	(index: number) => CSSProperties	null	Returns the style object for a thumb.
setRootRef	(node: HTMLDivElement) => void	null	Sets the root element ref.
onTrackPointerDown	(event: PointerEvent<HTMLDivElement>) => void	null	Pointer handlers for the root element.
onTrackPointerMove	(event: PointerEvent<HTMLDivElement>) => void	null	Pointer handlers for the root element.
onTrackPointerUp	(event: PointerEvent<HTMLDivElement>) => void	null	Pointer handlers for the root element.
updateValueFromPointer	(event: PointerEvent<HTMLDivElement>) => void	null	Updates value from a pointer position without dragging.
onThumbPointerDown	(event: PointerEvent<HTMLDivElement>, index: number) => void	null	Pointer handlers for thumbs.
onInputChange	(event: ChangeEvent<HTMLInputElement>, index: number) => void	null	Input change handler for thumbs.
onInputFocus	(event: FocusEvent<HTMLInputElement>, index: number) => void	null	Input focus handler for thumbs.
onInputBlur	(event: FocusEvent<HTMLInputElement>, index: number) => void	null	Input blur handler for thumbs.

Events#

SliderRootChangeEvent

Event fired when the Slider's value changes.

name	type	description
value	number \| number[]	The pressed state of the ToggleButton.
originalEvent	SyntheticEvent	The original event that triggered the change.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Slider component.

name	type	default	description
root	SliderRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
range	SliderRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the range's DOM element.
thumb	SliderRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the thumb's DOM element.

Types#

Instance

Instance of Slider component.

values
ComponentInstance<SliderRootProps, SliderRootState, SliderRootExposes>

SliderRange#

Props#

Defines valid properties in SliderRange component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: SliderRangeInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: SliderRangeInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<SliderRangePassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: SliderRangeInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by SliderRange component.

name	type	default	description
slider	SliderRootInstance	null	The Slider component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of SliderRange component.

name	type	default	description
root	SliderRangePassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of SliderRange component.

values
ComponentInstance<SliderRangeProps, SliderRangeState, SliderRangeExposes>

SliderThumb#

Props#

Defines valid properties in SliderThumb component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: SliderThumbInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: SliderThumbInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<SliderThumbPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: SliderThumbInstance) => ReactNode)	null	The children to render.
index	number	0	Index of the thumb.
tabIndex	number	0	Index of the element in tabbing order.
ariaLabel	string	null	Establishes a string value that labels the component.
ariaLabelledby	string	null	Establishes relationships between the component and label(s) where its value should be one or more element IDs.
name	string	null	Name attribute of the input.
inputId	string	null	Id of the input.
inputStyle	CSSProperties	null	Style of the input element.
inputClassName	string	null	Style class of the input element.
disabled	boolean	false	When present, it specifies that the element should be disabled.
readOnly	boolean	false	When present, it specifies that the element should be read-only.
invalid	boolean	false	When present, it specifies that the element is invalid.
required	boolean	null	When present, it specifies that the element is required.
onFocus	FocusEventHandler<HTMLInputElement>	null	Callback fired on focus.
onBlur	FocusEventHandler<HTMLInputElement>	null	Callback fired on blur.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by SliderThumb component.

name	type	default	description
slider	SliderRootInstance	null	The Slider component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of SliderThumb component.

name	type	default	description
root	SliderThumbPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of SliderThumb component.

values
ComponentInstance<SliderThumbProps, SliderThumbState, SliderThumbExposes>

useSlider#

Props#

Defines valid properties in useSlider.

name	type	default	description
value	number \| number[]	null	Value of the component.
defaultValue	number \| number[]	null	The default value for the input when not controlled by `value` .
min	number	0	Mininum boundary value.
max	number	100	Maximum boundary value.
orientation	"horizontal" \| "vertical"	horizontal	Orientation of the slider.
step	number	1	Step factor to increment/decrement the value.
minStepsBetweenThumbs	number	0	Minimum steps between thumbs.
onValueChange	(event: useSliderChangeEvent) => void	null	Callback fired when the ToggleButton's pressed state changes.
onValueChangeEnd	(event: useSliderChangeEvent) => void	null	Callback fired when the pointer interaction ends.
disabled	boolean	false	Whether the component is disabled.
readOnly	boolean	false	Whether the component is read-only.

State#

Defines valid state in useSlider.

name	type	default	description
value	number \| number[]	null	Value of the component.
isDragging	boolean	null	Whether the slider is being dragged.

Exposes#

Defines the methods and properties exposed by useSlider.

name	type	default	description
state	useSliderState	null	The state of the useSlider.
range	() => boolean	null	Determines if the slider is in range mode.
getThumbValue	(index: number) => number	null	Returns the value for a specific thumb.
getRangeStyle	() => CSSProperties	null	Returns the style object for the range element.
getThumbStyle	(index: number) => CSSProperties	null	Returns the style object for a thumb.
setRootRef	(node: HTMLDivElement) => void	null	Sets the root element ref.
onTrackPointerDown	(event: PointerEvent<HTMLDivElement>) => void	null	Pointer handlers for the root element.
onTrackPointerMove	(event: PointerEvent<HTMLDivElement>) => void	null	Pointer handlers for the root element.
onTrackPointerUp	(event: PointerEvent<HTMLDivElement>) => void	null	Pointer handlers for the root element.
updateValueFromPointer	(event: PointerEvent<HTMLDivElement>) => void	null	Updates value from a pointer position without dragging.
onThumbPointerDown	(event: PointerEvent<HTMLDivElement>, index: number) => void	null	Pointer handlers for thumbs.
onInputChange	(event: ChangeEvent<HTMLInputElement>, index: number) => void	null	Input change handler for thumbs.
onInputFocus	(event: FocusEvent<HTMLInputElement>, index: number) => void	null	Input focus handler for thumbs.
onInputBlur	(event: FocusEvent<HTMLInputElement>, index: number) => void	null	Input blur handler for thumbs.

Events#

useSliderChangeEvent

Event fired when the Slider's value changes.

name	type	description
originalEvent	E	The original event that triggered the change.
value	number \| number[]	The pressed state of the ToggleButton.

Types#

Instance

Instance of useSlider headless.

values
HeadlessInstance<useSliderProps, useSliderState, useSliderExposes>