Slider API
API documentation for Slider component
Slider#
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?: SliderInstance) => CSSProperties) | null | The style to apply to the component. |
| className | string | ((instance?: SliderInstance) => 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<SliderPassThrough> | 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: SliderInstance) => ReactNode) | null | The children to render. |
| disabled | boolean | false | When present, it specifies that the element should be disabled. |
| onValueChange | (event: SliderChangeEvent) => void | null | Callback fired when the ToggleButton's pressed state changes. |
| 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. |
| [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. |
Exposes#
Defines the methods and properties exposed by Slider component.
| name | type | default | description |
|---|
| state | useSliderState | null | The state of the useSlider. |
| registerThumb | () => number | null | Registers a thumb and returns its index. |
| thumbCounter | MutableRefObject<number> | null | Counter for tracking number of thumbs. |
| range | () => boolean | null | Determines if the slider is in range mode. |
| onTouchStart | (event: TouchEvent<HTMLElement>, index: number) => void | null | Handler for touch start events. |
| onDrag | (event: MouseEvent<Element, MouseEvent> | TouchEvent<Element>) => void | null | Handler for drag events. |
| onDragEnd | () => void | null | Handler for drag end events. |
| onMouseDown | (event: MouseEvent<HTMLElement>, index: number) => void | null | Handler for mouse down events. |
| onKeyDown | (event: KeyboardEvent, index: number) => void | null | Handler for key down events. |
| rangeStyle | () => CSSProperties | null | Returns the style object for the range. |
| handleThumbStyle | () => CSSProperties | null | Returns the style object for the handle thumb. |
| rangeStartHandleStyle | () => CSSProperties | null | Returns the style object for the range start handle. |
| rangeEndHandleStyle | () => CSSProperties | null | Returns the style object for the range end handle. |
Events#
SliderChangeEvent
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 | SliderPassThroughType<HTMLAttributes<HTMLDivElement>> | null | Used to pass attributes to the root's DOM element. |
| range | SliderPassThroughType<HTMLAttributes<HTMLSpanElement>> | null | Used to pass attributes to the range's DOM element. |
| thumb | SliderPassThroughType<HTMLAttributes<HTMLSpanElement>> | null | Used to pass attributes to the thumb's DOM element. |
Types#
Instance
Instance of Slider component.
| values |
|---|
| ComponentInstance<SliderProps, SliderState, SliderExposes> |
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 | SliderInstance | 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. |
| 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. |
| [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 | SliderInstance | 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. |
| onValueChange | (event: useSliderChangeEvent) => void | null | Callback fired when the ToggleButton's pressed state changes. |
State#
Defines valid state in useSlider.
| name | type | default | description |
|---|
| value | number | number[] | null | Value of the component. |
Exposes#
Defines the methods and properties exposed by useSlider.
| name | type | default | description |
|---|
| state | useSliderState | null | The state of the useSlider. |
| registerThumb | () => number | null | Registers a thumb and returns its index. |
| thumbCounter | MutableRefObject<number> | null | Counter for tracking number of thumbs. |
| range | () => boolean | null | Determines if the slider is in range mode. |
| onTouchStart | (event: TouchEvent<HTMLElement>, index: number) => void | null | Handler for touch start events. |
| onDrag | (event: MouseEvent<Element, MouseEvent> | TouchEvent<Element>) => void | null | Handler for drag events. |
| onDragEnd | () => void | null | Handler for drag end events. |
| onMouseDown | (event: MouseEvent<HTMLElement>, index: number) => void | null | Handler for mouse down events. |
| onKeyDown | (event: KeyboardEvent, index: number) => void | null | Handler for key down events. |
| rangeStyle | () => CSSProperties | null | Returns the style object for the range. |
| handleThumbStyle | () => CSSProperties | null | Returns the style object for the handle thumb. |
| rangeStartHandleStyle | () => CSSProperties | null | Returns the style object for the range start handle. |
| rangeEndHandleStyle | () => CSSProperties | null | Returns the style object for the range end handle. |
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> |