Skip to content

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

Free

Simple Slider Field for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not set the system volume.

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

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

Usage

<Field class="max-w-md">
  <FieldTitle>Volume</FieldTitle>
  <FieldDescription>
    Current volume: <span class="font-medium">{{ value[0] }}%</span>
  </FieldDescription>
  <Slider
    :aria-label='["Volume"]'
    class="mt-2"
    :max="100"
    :min="0"
    @value-change="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 @value-change.

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", value-change="handleValueChange", step="1" and value="value". The rest is on the Slider page.

All 38 field examples