Skip to content

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

Free

Percentage Range Slider for Vue

A two-thumb percentage slider from 10% to 90% that steps by 5, with 0% and 100% under the track ends.

UI library: Ark UI

Percentage Range is on the left and 10% - 90% is on the right. The thumbs step by 5, and 0% and 100% sit under the ends.

Use it for a band of a total, such as a threshold. Named choices belong in a Radio Group. In Vue, Ark UI snaps each thumb to that step.

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>Percentage Range</Label>
    <span class="text-muted-foreground text-sm tabular-nums">
      {{ value[0] }}% - {{ value[1] }}%
    </span>
  </div>
  <Slider
    :aria-label='["Minimum percentage", "Maximum percentage"]'
    :max="100"
    :min="0"
    @value-change="handleValueChange"
    :step="5"
    :value="value"
  />
  <div class="flex items-center justify-between text-muted-foreground text-xs">
    <span>0%</span>
    <span>100%</span>
  </div>
</div>

FAQ

How does the readout follow the thumb?

The value lives in state, starting at [10, 90], and goes back to the slider as value. The text beside the label prints both values with % signs. The Vue file binds :value and listens to @value-change, which receives details.value.

How does it step?

step is 5, so both thumbs land on multiples of 5.

What range does it cover?

0 to 100, so the values read as percentages. min and max set the ends.

What are the labels under the track?

0% and 100% in a justify-between row, plain muted text that marks the ends.

How are the thumbs named?

Percentage Range is a visible Label. On Ark UI, aria-label names each thumb: Minimum percentage and Maximum percentage.

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.

API Reference

Label

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

Slider

Sets aria-label="[Minimum percentage, Maximum percentage]", max="100", min="0", value-change="handleValueChange", step="5" and value="value". The rest is on the Slider page.

All 29 slider examples