Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
⚠️ Preview components are considered unstable:
- Features and APIs may change before final release
- Please contact us if you intend to use this in your product
| Name | Description | Default |
|---|---|---|
| input | The hidden input for the Slider.
This is the PRIMARY slot: all native properties specified directly on ShorthandProps<{ as?: "input"; } & Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<...>> & { ...; } & { ...; } & { ...; }> | - |
| root | The root of the Slider.
The root slot receives the ShorthandProps<{ as?: "div"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }> | - |
| as | "input" | - |
| rail | The Slider's base. It is used to visibly display the min and max selectable values. ShorthandProps<{ as?: "div"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }> | - |
| thumb | The draggable icon used to select a given value from the Slider.
This is the element containing ShorthandProps<{ as?: "div"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }> | - |
| orient | Orient is a non standard attribute that allows for vertical orientation in Firefox. It is set internally
when "horizontal""vertical" | - |
| defaultValue | The starting value for an uncontrolled Slider.
Mutually exclusive with number | - |
| value | The current value of the controlled Slider.
Mutually exclusive with number | - |
| vertical | Whether to render the Slider vertically. boolean | `false` (renders horizontally) |
| origin | The starting origin point for the Slider. number | min |
| size | The size of the Slider. "small""medium" | "'medium'" |
| onChange | Triggers a callback when the value has been changed. This will be called on every individual step. ((ev: ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void) | - |
| getAriaValueText | The Slider's current value label to be read by the screen reader. ((value: number) => string) | - |
A slider can be a controlled input where the slider value is stored in state and updated with onChange.
You can define the step value of a slider so that the value will always be a mutiple of that step
A slider's progress can be represented with an origin so that values below the origin will have negative progress and those above will have positive progress. Origin, however, has no effect on the actual value of the slider.
A slider can be rendered vertically where the max value is at the top of the slider.
A disabled slider will not change or fire events on click or keyboard press.