Skip to content

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

Free

Price Range Slider for Vue

A Price Range slider on a $0 to $1000 scale, opening at $200 and $800, with both prices under the track.

UI library: Ark UI

Price Range labels a track with two thumbs. It opens at $200 and $800, and those prices sit under the track.

Use it in a product filter next to other facets. Add a Number Input at each end if shoppers type the bounds. In Vue, Ark UI does not format the prices.

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

FAQ

How does the readout follow the thumb?

The value lives in state, starting at [200, 800], and goes back to the slider as value. The two prices under the track print value[0] and value[1] with a dollar sign. The Vue file binds :value and listens to @value-change, which receives details.value.

What range does it cover?

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

How are the thumbs named?

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

How are the prices formatted?

A dollar sign before the raw number. For thousands separators or another currency, format the value with Intl.NumberFormat before you print it.

Can I snap to round prices?

Set step, for example 10 or 50. The demo leaves it at 1.

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="[Minimum price, Maximum price]", max="1000", min="0", value-change="handleValueChange" and value="value". The rest is on the Slider page.

All 29 slider examples