Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Simple Slider Field for React

Volume, with Current volume: 50% above a single thumb on a track from 0 to 100 that moves by 1.

Volume is the title. Under it, Current volume: 50%, which follows the thumb. One thumb sits on a track from 0 to 100, stepping by 1.

Use it when people should see the number as they drag. A value they type instead is a Number Input. In React, Base UI does not set the system volume.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Field anatomy: root, label, input, description, error

Usage

<Field className="max-w-md">
  <FieldTitle>Volume</FieldTitle>
  <FieldDescription>
    Current volume: <span className="font-medium">{value[0]}%</span>
  </FieldDescription>
  <Slider
    aria-label="Volume"
    className="mt-2"
    max={100}
    min={0}
    onValueChange={handleValueChange}
    step={1}
    value={value}
  />
</Field>

FAQ

How is the volume number stored?

value is an array whose first number starts at 50. The range is 0 to 100 and step is 1. The bounds are min and max.

How does the percentage stay in sync?

FieldDescription prints the first number in value with a percent sign. font-medium marks that number. Update value from onValueChange.

What names the slider?

FieldTitle is the visible caption, Volume. aria-label on Slider names the control, because FieldTitle is a visual title.

What is the space above the track?

mt-2 on Slider adds space under the description. max-w-md on Field caps the row.

Why is there one thumb?

value holds one number, so the slider draws one thumb. A second number in that array draws a second thumb.

Which keys move the thumb?

The arrow keys move the focused thumb. Field does not add keys of its own. Home and End jump to the ends of the range.

API Reference

Field

No extra props in this demo. The rest is on the Field page.

Slider

Sets aria-label="Volume", max={100}, min={0}, onValueChange={handleValueChange}, step={1} and value={value}. The rest is on the Slider page.

All 38 field examples