Skip to content

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

Free

Slider with Value Display for Svelte

A Quality slider at 65% with the percentage beside the label, on the same row, as the thumb moves.

UI library: Ark UI

Quality is on the left and 65% is on the right, above a single track. The percentage is the only readout.

Use it when the exact number matters as much as where the thumb sits. A Number Input helps if people need one specific value. In Svelte, Ark UI does not format the percent.

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"><div class="flex items-center justify-between"><Label>Quality</Label><span class="text-muted-foreground text-sm tabular-nums">{value[0]}%</span></div><Slider aria-label={["Quality"]} onValueChange={handleValueChange} value={value} /></div>

FAQ

How does the readout follow the thumb?

The value lives in state, starting at 65, and goes back to the slider as value. The percentage beside the label prints the first value with a % sign. onValueChange receives details.value, the new array.

How are the label and number placed?

In a flex items-center justify-between row above the slider. The number is muted and uses tabular-nums, so it keeps its width as digits change.

How is the slider named?

The Quality 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.

What scale is the percentage on?

0 to 100 in steps of 1, so the value is already a percentage. min and max set the ends.

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.

When should I save the quality?

The change callback runs on every step while the thumb moves. Save or fetch from the end-of-change callback, which runs once when dragging stops. On Ark UI it is onValueChangeEnd.

API Reference

Label

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

Slider

Sets aria-label={["Quality"]}, onValueChange={handleValueChange} and value={value}. The rest is on the Slider page.

All 29 slider examples