Skip to content

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

Free

Slider with Label for Solid

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

UI library: Ark UI

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 Solid, Ark UI does not supply that label text.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<div class="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