Hourly rate (USD)
<Slider.Root defaultValue={50} />
<Slider.Root defaultValue={[35, 65]} min={20} max={100} />An array value gives you two thumbs and a range. Slider.Value renders the
current value as text next to it.
API
Slider.Root
| Prop | Type | Default | |
|---|---|---|---|
exit | Exit | — | Inside a <Presence>: plays this child's way out before it unmounts. |
className | string | ((state: SliderRootState) => string | undefined) | — | CSS class applied to the element, or a function that returns a class based on the component's state. |
defaultValue | number | readonly number[] | — | The uncontrolled value of the slider when it's initially rendered. To render a controlled slider, use the value prop instead. |
disabled | boolean | — | Whether the slider should ignore user interaction. |
form | string | — | Identifies the form that owns the slider inputs. Useful when the slider is rendered outside the form. |
format | NumberFormatOptions | — | Options to format the value. |
largeStep | number | — | The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down. |
locale | LocalesArgument | — | The locale used by Intl.NumberFormat when formatting the value.
Defaults to the user's runtime locale. |
max | number | 100 | The maximum allowed value of the slider. Should not be equal to min. |
min | number | 0 | The minimum allowed value of the slider. Should not be equal to max. |
minStepsBetweenValues | number | — | The minimum steps between values in a range slider. |
name | string | — | Identifies the field when a form is submitted. |
onValueChange | ((value: number | readonly number[], eventDetails: SliderRootChangeEventDetails) => void) | — | Callback function that is fired when the slider's value changed.
Receives the new value as the first argument; the originating event is
available as eventDetails.event. The value is also reflected on
eventDetails.event.target.value for form integration. The eventDetails.reason indicates what triggered the change: |
onValueCommitted | ((value: number | readonly number[], eventDetails: SliderRootCommitEventDetails) => void) | — | Callback function that is fired when a value change is committed.
Does not fire if the value did not change, or if the change was canceled.
Warning: This is a generic event, not a change event. The eventDetails.reason indicates what triggered the commit: |
orientation | Orientation | — | The component orientation. |
render | ComponentRenderFn<HTMLProps, SliderRootState> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
step | number | — | The granularity with which the slider can step through values. (A "discrete" slider.)
The min prop serves as the origin for the valid values.
We recommend (max - min) to be evenly divisible by the step. |
style | CSSProperties | ((state: SliderRootState) => CSSProperties | undefined) | — | Style applied to the element, or a function that returns a style object based on the component's state. |
thumbAlignment | "center" | "edge" | "edge-client-only" | — | How the thumb(s) are aligned relative to Slider.Control when the value is at min or max: |
thumbCollisionBehavior | "none" | "push" | "swap" | — | Controls how thumbs behave when they collide during pointer interactions. |
value | number | readonly number[] | — | The value of the slider. For range sliders, provide an array with one value per thumb. |
Plus the DOM props of the element it renders. Source: slider/components/slider-root.tsx.
Slider.Value
| Prop | Type | Default | |
|---|---|---|---|
exit | Exit | — | Inside a <Presence>: plays this child's way out before it unmounts. |
children | ((formattedValues: readonly string[], values: readonly number[]) => ReactNode) | null | — | |
className | string | ((state: SliderValueState) => string | undefined) | — | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ComponentRenderFn<HTMLProps, SliderValueState> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
style | CSSProperties | ((state: SliderValueState) => CSSProperties | undefined) | — | Style applied to the element, or a function that returns a style object based on the component's state. |
Plus the DOM props of the element it renders. Source: slider/components/slider-value.tsx.