Skip to content

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

Free

Vertical Range Slider for Vue

A vertical Range slider with two thumbs opening at 30 and 70, and those two values stacked under the track.

UI library: Ark UI

Range sits above a vertical track with two thumbs. Under it, 70 is written above a hyphen and 30 is written below.

Use it beside a tall chart or preview. A horizontal track is easier on a short page, and typed ends belong in a Number Input. In Vue, Ark UI does not stack those two 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 flex-col items-center gap-4">
  <Label>Range</Label>
  <div class="h-56">
    <Slider
      :aria-label='["Range start", "Range end"]'
      @value-change="handleValueChange"
      orientation="vertical"
      :value="value"
    />
  </div>
  <div class="flex flex-col items-center gap-1 text-muted-foreground text-sm tabular-nums">
    <span>{{ value[1] }}</span>
    <span>-</span>
    <span>{{ value[0] }}</span>
  </div>
</div>

FAQ

How is it made vertical?

orientation="vertical", inside a h-56 box that sets its length.

How does the readout follow the thumb?

The value lives in state, starting at [30, 70], and goes back to the slider as value. The reading prints the higher value above the lower one. The Vue file binds :value and listens to @value-change, which receives details.value.

Which thumb is which?

The first value is the lower thumb, near the bottom, and the second the upper one.

How are the thumbs named?

Range is a visible Label. On Ark UI, aria-label names each thumb: Range start and Range end.

What range does it cover?

0 to 100. min and max set the ends.

Which keys move the thumbs?

Up and Right raise the focused thumb, Down and Left lower it, 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="[Range start, Range end]", value-change="handleValueChange", orientation="vertical" and value="value". The rest is on the Slider page.

All 29 slider examples