Slider components

FREE

Free and open-source React slider components built for modern applications and websites. These sliders are built using React Aria and styled with Tailwind CSS.

Slider example

Installation

You can add this slider component using our CLI or manually:

npx untitledui@latest add slider

Slider examples

Below are examples and variations of this slider component:

Default

Bottom label

0%
25%

Top floating

0%
25%

Single thumb

50%

API reference

Slider

Import Slider from @/components/base/slider/slider. Renders React Aria’s Slider — all of its props are supported.

Slider props
PropTypeDefaultDescription
labelPosition
"default""bottom""top-floating"
"default"Where the value label sits relative to the thumb. default hides it, bottom places it below, and top-floating shows it in a tooltip above.
labelFormatter((value: number) => string)—Formats the value shown in the label. Called with the raw thumb value. Without it the value is formatted as a percentage.
Props from React Aria (20)
Slider inherited props
PropTypeDefaultDescription
defaultValuenumber | number[]—The default value (uncontrolled).
formatOptionsIntl.NumberFormatOptions—The display format of the value label.
idstring—The element's unique identifier.
isDisabledboolean—Whether the whole Slider is disabled.
maxValuenumber100The slider's maximum value.
minValuenumber0The slider's minimum value.
onChange((value: number | number[]) => void)—Handler that is called when the value changes.
onChangeEnd((value: number | number[]) => void)—Fired when the slider stops moving, due to being let go.
orientation
"horizontal""vertical"
"horizontal"The orientation of the Slider.
stepnumber1The slider's step value.
valuenumber | number[]—The current value (controlled).
styleStyleOrFunction<SliderRenderProps>—The inline style for the element. A function may be provided to compute the style based on component state.
childrenChildrenOrFunction<SliderRenderProps>—The children of the component. A function may be provided to alter the children based on component state.
slotstring | null—A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
classNameClassNameOrFunction<SliderRenderProps>—The CSS className for the element. A function may be provided to compute the class based on component state.
renderDOMRenderFunction<"div", SliderRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
aria-describedbystring—Identifies the element (or elements) that describes the object.
aria-detailsstring—Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-labelstring—Defines a string value that labels the current element.
aria-labelledbystring—Identifies the element (or elements) that labels the current element.

Also accepts the global HTML attributes (dir, lang, hidden, inert, translate), all standard React DOM event handlers.

FAQs

Please refer to our frequently asked questions page for more.

Pass an array to defaultValue or value, such as defaultValue={[0, 25]}. The slider renders one thumb per value and fills the track between them. Pass a single number, such as defaultValue={50}, for a one-thumb slider that fills from the start.

Set labelPosition to "bottom" to show the value below each thumb, or "top-floating" to show it in a tooltip above each thumb. The default, "default", hides the value label.

The built-in label divides the thumb value by 100 before formatting it, and shows a whole percentage by default, so it only reads correctly for a 0 to 100 range. Custom formatOptions also receive the divided value. For other ranges or units, pass labelFormatter, which receives the raw thumb value and returns a string, for example labelFormatter={(value) => "$" + value}.

Use React Aria's minValue, maxValue and step props. minValue defaults to 0 and maxValue defaults to 100.

Pass value and onChange for controlled state, or defaultValue for uncontrolled state. For a range slider, both are arrays. Use onChangeEnd if you only need the final value after the user stops dragging.

Yes. Each thumb is focusable with Tab and shows a focus ring. The arrow keys move the focused thumb by step, Page Up and Page Down move it in larger increments, and Home and End jump to its minimum or maximum. In a range slider, a thumb can't move past the other thumb.

Multi-selectSocial buttons