Slider

A draggable input for selecting a numeric value within a range.

Volume

50

import { Slider } from '@ontoui/react';

<Slider.Root defaultValue={50}>
  <Slider.Label>Volume</Slider.Label>
  <Slider.Value />
  <Slider.Control>
    <Slider.Track>
      <Slider.Indicator />
      <Slider.Thumb aria-label="Volume" />
    </Slider.Track>
  </Slider.Control>
</Slider.Root>;

Anatomy

Part	Element	Description
Slider.Root	<div>	Groups all parts and holds the slider state.
Slider.Label	<div>	An accessible label associated with the slider thumbs.
Slider.Value	<output>	Displays the current value as text.
Slider.Control	<div>	The clickable, interactive area of the slider.
Slider.Track	<div>	The full range of the slider; contains indicator and thumbs.
Slider.Indicator	<div>	Fills the track to visualize the current value.
Slider.Thumb	<div>	The draggable handle positioned at the current value.

Examples

Range slider

Pass an array of values to Slider.Root and place one Slider.Thumb per value to create a range slider.

Price range

<Slider.Root defaultValue={[20, 80]}>
  <Slider.Label>Price range</Slider.Label>
  <Slider.Control>
    <Slider.Track>
      <Slider.Indicator />
      <Slider.Thumb index={0} aria-label="Minimum price" />
      <Slider.Thumb index={1} aria-label="Maximum price" />
    </Slider.Track>
  </Slider.Control>
</Slider.Root>

Vertical

Set orientation="vertical" on Slider.Root and give it a height to lay the slider out vertically.

Volume

60

<Slider.Root defaultValue={60} orientation="vertical" style={{ height: '200px' }}>
  <Slider.Label>Volume</Slider.Label>
  <Slider.Value />
  <Slider.Control>
    <Slider.Track>
      <Slider.Indicator />
      <Slider.Thumb aria-label="Volume" />
    </Slider.Track>
  </Slider.Control>
</Slider.Root>

Disabled

Set disabled on Slider.Root to prevent interaction.

Brightness

40

<Slider.Root defaultValue={40} disabled>
  <Slider.Label>Brightness</Slider.Label>
  <Slider.Value />
  <Slider.Control>
    <Slider.Track>
      <Slider.Indicator />
      <Slider.Thumb aria-label="Brightness" />
    </Slider.Track>
  </Slider.Control>
</Slider.Root>

API Reference

Slider.Root

Prop	Type	Default
children?	ReactNode	—
className?	string	—
style?	CSSProperties	—
defaultValue?	number | number[]	—
value?	number | number[]	—
onValueChange?	(value: number | number[], eventDetails: { event: Event; activeThumbIndex: number; }) => void	—
onValueCommitted?	(value: number | number[], eventDetails: { event: Event; }) => void	—
min?	number	—
max?	number	—
step?	number	—
largeStep?	number	—
disabled?	boolean	—
orientation?	"horizontal" | "vertical"	—
name?	string	—
ref?	Ref<HTMLDivElement>	—

Slider.Label

Prop	Type	Default
children?	ReactNode	—
className?	string	—
ref?	Ref<HTMLDivElement>	—

Slider.Value

Prop	Type	Default
className?	string	—
children?	(formattedValues: readonly string[], values: readonly number[]) => ReactNode	—
ref?	Ref<HTMLDivElement>	—

Slider.Control

Prop	Type	Default
children?	ReactNode	—
className?	string	—
ref?	Ref<HTMLDivElement>	—

Slider.Track

Prop	Type	Default
children?	ReactNode	—
className?	string	—
ref?	Ref<HTMLDivElement>	—

Slider.Indicator

Prop	Type	Default
className?	string	—
ref?	Ref<HTMLDivElement>	—

Slider.Thumb

Prop	Type	Default
className?	string	—
index?	number	—
aria-label?	string	—
disabled?	boolean	—
tabIndex?	number	—
ref?	Ref<HTMLDivElement>	—