Skip to content

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

Free

Slider with Min/Max Labels for Vue

A Size slider with the label above the track, starting at 50, and with 0 and 100 written under the ends.

UI library: Ark UI

Size sits above the track. Small numbers, 0 and 100, sit under the two ends. The thumb starts in the middle.

Use it when the scale is not obvious from the label alone. A Number Input is clearer when people type a size. In Vue, Ark UI does not print those end numbers.

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>Size</Label>
  <Slider :aria-label='["Size"]' :defaultValue="[50]" :max="100" :min="0" />
  <div class="flex items-center justify-between text-muted-foreground text-xs">
    <span>0</span>
    <span>100</span>
  </div>
</div>

FAQ

How are the end labels placed?

A flex items-center justify-between row under the slider, with 0 and 100 in text-xs muted text. They are plain text, so they don't change with min and max.

What range does it cover?

0 to 100. Keep the labels in step with the slider's range when you change it. min and max set the ends.

Where does it start?

At 50, from defaultValue. The slider keeps its own value.

How is the slider named?

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

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.

Do the labels line up with the ends?

Yes. The labels row is in the same w-full max-w-md column as the slider, so justify-between puts 0 under the start and 100 under the end.

API Reference

Label

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

Slider

Sets aria-label="[Size]", defaultValue="[50]", max="100" and min="0". The rest is on the Slider page.

All 29 slider examples