Slider

Demos

A controlled slider with its value shown beside the label.

Average sleep7 h

"use client"

import * as React from "react"

import { Slider } from "@workspace/ui/components/slider"

export function SliderDemo() {
  const labelId = React.useId()
  const [sleep, setSleep] = React.useState(7)

  return (
    <div className="grid w-full max-w-sm gap-3">
      <div className="flex justify-between text-xs">
        <span id={labelId} className="font-medium">
          Average sleep
        </span>
        <span className="text-muted-foreground tabular-nums">{sleep} h</span>
      </div>
      <Slider
        aria-labelledby={labelId}
        value={[sleep]}
        onValueChange={(value) => setSleep(Array.isArray(value) ? value[0]! : value)}
        min={3}
        max={12}
        step={0.5}
      />
    </div>
  )
}

Usage

Use a slider when the exact number matters less than its position in a range, such as average sleep or a target band. When the reader needs an exact value, use an Input, or show the value next to the slider.

Import it from @workspace/ui/components/slider.

Anatomy

Slider — Track, filled range, and one thumb per value.

Notes

Always pass defaultValue or value as an array. One item gives one thumb, two items give a range.
Every slider needs a name. Point aria-labelledby at a visible label. aria-label on the slider only names the outer group, not the thumbs.
Arrow keys move by step. Page Up and Page Down move by larger steps.

Examples

Range

Pass two values to get two thumbs.

Target glucose range

"use client"

import * as React from "react"

import { Slider } from "@workspace/ui/components/slider"

export function SliderRange() {
  const labelId = React.useId()

  return (
    <div className="grid w-full max-w-sm gap-3">
      <span id={labelId} className="text-xs font-medium">
        Target glucose range
      </span>
      <Slider aria-labelledby={labelId} defaultValue={[70, 100]} min={40} max={200} />
    </div>
  )
}

Disabled

A slider the reader can see but not move.

Reminder volume

"use client"

import * as React from "react"

import { Slider } from "@workspace/ui/components/slider"

export function SliderDisabled() {
  const labelId = React.useId()

  return (
    <div className="grid w-full max-w-sm gap-3">
      <span id={labelId} className="text-xs font-medium text-muted-foreground">
        Reminder volume
      </span>
      <Slider aria-labelledby={labelId} defaultValue={[40]} disabled />
    </div>
  )
}

Props

These are the props you set most often. Unlisted props pass through to the underlying element.

Slider

Prop	Type	Default	Description
`defaultValue`	`number[]`	—	Value on first render.
`value`	`number[]`	—	Value when controlled.
`onValueChange`	`(value) => void`	—	Called while the value changes. `value` is a number or an array.
`onValueCommitted`	`(value) => void`	—	Called once when the reader lets go.
`min`	`number`	`0`	Lowest value.
`max`	`number`	`100`	Highest value.
`step`	`number`	`1`	Amount each step moves.
`largeStep`	`number`	`10`	Amount Page Up and Page Down move.
`orientation`	`"horizontal" or "vertical"`	`horizontal`	Direction of the track.
`disabled`	`boolean`	`false`	Blocks input and dims the slider.