Skip to content

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

Free

Slider with Label for Ark UI

A Volume slider with the label above the track and no readout, starting at 30 on a scale from 0 to 100.

The word Volume sits above a single track. The thumb starts at 30, and no number is shown.

Use it in a settings form where each slider needs a name. Let people type the level in an Input when the exact figure matters. In React, Ark UI does not supply that label text.

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

Slider anatomy: root, label, value, track, range, thumb

Usage

<div className="flex w-full max-w-md flex-col gap-2">
  <Label>Volume</Label>
  <Slider aria-label={["Volume"]} defaultValue={[30]} />
</div>

FAQ

How is the slider named?

The Volume text is a visible Label, and the slider gets the same name with aria-label, so screen readers announce what it sets. On Ark UI, aria-label is a list with one name per thumb.

Where does it start?

At 30, from defaultValue. The slider keeps its own value after that.

What range does it cover?

0 to 100 in steps of 1, the defaults. min and max set the ends.

How are the label and slider laid out?

A flex flex-col gap-2 column, w-full max-w-md. The label is first, so it sits above the track.

Can I move it from the keyboard?

Yes. The thumb takes focus with Tab. The arrow keys move it by one step, Page Up and Page Down by a larger step, and Home and End jump to the ends.

How do I show the number too?

Make the slider controlled and print the value beside the label. The With Value Display example does exactly that.

API Reference

Label

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

Slider

Sets aria-label={["Volume"]} and defaultValue={[30]}. The rest is on the Slider page.

All 29 slider examples