Skip to content

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

Free

Range with Value Display Slider for Vue

A Range slider with two thumbs opening at 30 and 70, and that span written beside the label.

UI library: Ark UI

Range is on the left and 30 - 70 is on the right, above one track with two thumbs. Nothing is written under the track.

Use it where height is tight and the span should still be readable. Put the same numbers in a Field if people type them. In Vue, Ark UI does not render that readout.

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>Range</Label>
    <span class="text-muted-foreground text-sm tabular-nums">
      {{ value[0] }} - {{ value[1] }}
    </span>
  </div>
  <Slider
    :aria-label='["Range start", "Range end"]'
    :max="100"
    :min="0"
    @value-change="handleValueChange"
    :value="value"
  />
</div>

FAQ

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 text beside the label prints both values with a dash between them. The Vue file binds :value and listens to @value-change, which receives details.value.

How is the row laid out?

flex items-center justify-between: the label at the start, the values at the end in muted tabular-nums text.

What range does it cover?

0 to 100 in steps of 1. min and max set the ends.

How are the thumbs named?

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

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 range?

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. In Vue, listen to @value-change-end.

API Reference

Label

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

Slider

Sets aria-label="[Range start, Range end]", max="100", min="0", value-change="handleValueChange" and value="value". The rest is on the Slider page.

All 29 slider examples