Slider Preview

A slider lets someone set a value from a given range. Sliders can take immediate effect, like a volume control, or can require a submission, like in a form.

Use a slider for imprecise values. Don't use them for ranges that are very small or very large. For precise numerical inputs, like a dollar amount, try an input.

Loading...
Open in CodeSandbox
Slider storybook
React guidance
Slider pattern
WAI guidance

Properties

as

“input”
Default:
none

defaultValue

The starting value for an uncontrolled Slider. Mutually exclusive with value prop.

number
Default:
none

input

The hidden input for the Slider. This is the PRIMARY slot: all native properties specified directly on <Slider> will be applied to this slot, except className and style , which remain on the root slot.

({ as?: "input"; } & Omit<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<...>> & { ...; }, "children"> & { ...; } & { ...; })
Default:
none

onChange

Triggers a callback when the value has been changed. This will be called on every individual step.

((ev: ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void)
Default:
none

orient

Orient is a non standard attribute that allows for vertical orientation in Firefox. It is set internally when vertical is set to true. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#non_standard_attributes Webkit/Chromium support for vertical inputs is provided via -webkit-appearance css property

“horizontal” “vertical”
Default:
none

rail

The Slider’s base. It is used to visibly display the min and max selectable values.

WithSlotShorthandValue<{ as?: "div"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }>
Default:
none

root

The root of the Slider. The root slot receives the className and style specified directly on the <Slider> . All other native props will be applied to the primary slot, input .

WithSlotShorthandValue<{ as?: "div"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }>
Default:
none

size

The size of the Slider.

“small” “medium”
Default:
“‘medium’”

thumb

The draggable icon used to select a given value from the Slider. This is the element containing role = ‘slider’ .

WithSlotShorthandValue<{ as?: "div"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }>
Default:
none

value

The current value of the controlled Slider. Mutually exclusive with defaultValue prop.

number
Default:
none

vertical

Render the Slider in a vertical orientation, smallest value on the bottom.

boolean
Default:
`false`