Slider

import { Slider } from "@nyte-ai/ui/slider";

A value picked by dragging along a track. No Nyte styling here.

Usage

• Name the control. Use Slider.Label when the label is visible, or aria-label on each Slider.Thumb when it is not.
• value with onValueChange controls the slider. defaultValue leaves it uncontrolled.
• A range slider takes an array for value or defaultValue and one Slider.Thumb per entry. For server rendering, give each thumb an explicit index.
• step snaps the value. largeStep sets the jump for Page Up, Page Down, and Shift with an arrow key.
• Set orientation="vertical" on Slider.Root for a vertical slider.
• Render tick marks yourself, positioning each along the track as a percentage of the value range. Pair them with step so the thumb lands on each one.

Anatomy

<Slider.Root>
  <Slider.Label />
  <Slider.Value />
  <Slider.Control>
    <Slider.Track>
      <Slider.Indicator />
      <Slider.Thumb />
    </Slider.Track>
  </Slider.Control>
</Slider.Root>

Examples

A labeled slider

<Slider.Root defaultValue={0.7} min={0} max={1} step={0.1}>
  <div>
    <Slider.Label>Temperature</Slider.Label>
    <Slider.Value />
  </div>
  <Slider.Control>
    <Slider.Track>
      <Slider.Indicator />
      <Slider.Thumb />
    </Slider.Track>
  </Slider.Control>
</Slider.Root>

Without a visible label, name the thumb instead.

<Slider.Thumb aria-label="Volume" />

Controlled

const [volume, setVolume] = useState(0.5);

<Slider.Root value={volume} onValueChange={setVolume} min={0} max={1} step={0.1}>
  <Slider.Label>Volume</Slider.Label>
  <Slider.Control>
    <Slider.Track>
      <Slider.Indicator />
      <Slider.Thumb />
    </Slider.Track>
  </Slider.Control>
</Slider.Root>;

A range

thumbCollisionBehavior decides what two thumbs do when a drag pushes one into the other. "push" is the default, "swap" trades their places when one is dragged past the other, and "none" stops them from passing.

<Slider.Root defaultValue={[25, 75]} thumbCollisionBehavior="swap">
  <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>

Thumb alignment

thumbAlignment="edge" insets the thumb so its edge lines up with the edge of the control at min and max, instead of overflowing the control the way the default "center" does. "edge-client-only" does the same but renders after hydration, which costs less bundle.

<Slider.Root thumbAlignment="edge" />

In a form

<Slider.Root name="volume">
  <Slider.Label>Volume</Slider.Label>
  <Slider.Control>
    <Slider.Track>
      <Slider.Indicator />
      <Slider.Thumb />
    </Slider.Track>
  </Slider.Control>
</Slider.Root>

Props

The reference tables below come from Base UI, MIT, © Material-UI SAS.

Root

Groups all parts of the slider. Renders a <div> element.

Root Props:

Root Data Attributes:

Label

An accessible label that is automatically associated with the slider thumbs. Renders a <div> element.

Label Props:

Value

Displays the current value of the slider as text. Renders an <output> element.

Value Props:

Value Data Attributes:

Control

The clickable, interactive part of the slider. Renders a <div> element.

Control Props:

Control Data Attributes:

Track

Contains the slider indicator and represents the entire range of the slider. Renders a <div> element.

Track Props:

Track Data Attributes:

Indicator

Visualizes the current value of the slider. Renders a <div> element.

Indicator Props:

Indicator Data Attributes:

Thumb

The draggable part of the slider at the tip of the indicator. Renders a <div> element and a nested <input type="range">.

Thumb Props:

index Prop Example:

<Slider.Root value={[10, 20]}>
  <Slider.Thumb index={0} />
  <Slider.Thumb index={1} />
</Slider.Root>

Thumb Data Attributes:

Accessibility

• Each thumb renders a nested <input type="range">. Arrow keys move by step, and Home and End jump to the ends of the range.
• Page Up, Page Down, and Shift with an arrow key move by largeStep.
• Slider.Label associates itself with the thumbs. A multi-thumb slider still needs aria-label on each thumb to tell them apart.
• aria-valuetext on a thumb replaces the announced number. getAriaValueText takes precedence over it.
• Slider.Value renders an <output> element.
• The root reflects data-dragging and data-orientation.