Skip to content

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

Free

With Increment/Decrement Buttons Slider for Vue

A Quantity slider at 50 between minus and plus buttons that move it by 10, with the number above the track.

UI library: Ark UI

Quantity and 50 sit above the track. A minus button and a plus button sit at the ends and change the value by 10.

Use it for a quantity or a zoom level, where a click is easier than a drag. A Number Input is better for a large jump. In Vue, Ark UI does not render those buttons.

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>Quantity</Label>
    <span class="text-muted-foreground text-sm tabular-nums">{{ value[0] }}</span>
  </div>
  <div class="flex items-center gap-2">
    <Button aria-label="Decrease" @click="decrement" size="icon-md" variant="outline">
      <MinusIcon aria-hidden="true" />
    </Button>
    <Slider
      :aria-label='["Quantity"]'
      class="flex-1"
      @value-change="handleValueChange"
      :value="value"
    />
    <Button aria-label="Increase" @click="increment" size="icon-md" variant="outline">
      <PlusIcon aria-hidden="true" />
    </Button>
  </div>
</div>

FAQ

What do the buttons do?

Minus sets the value 10 lower and plus 10 higher, clamped to 0 and 100. They are outline icon buttons at size="icon-md".

How does the readout follow the thumb?

The value lives in state, starting at 50, and goes back to the slider as value. The number beside the label prints it, and the buttons write the same state. The Vue file binds :value and listens to @value-change, which receives details.value.

How are the icon buttons named?

With aria-label Decrease and Increase. The icons are aria-hidden="true".

How is the row laid out?

A flex items-center gap-2 row: the outline button, the slider with flex-1, then the other button.

Why do the buttons move 10 and the keys 1?

The buttons add 10 in their handlers; the slider's step is still 1. Change both if you want them to match.

How is the slider named?

Quantity is a visible Label, and the slider has aria-label Quantity. On Ark UI, aria-label is a list with one name per thumb.

API Reference

Label

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

Button

Sets aria-label="Decrease", click="decrement", size="icon-md", variant="outline", aria-label="Increase" and click="increment". The rest is on the Button page.

Slider

Sets aria-label="[Quantity]", value-change="handleValueChange" and value="value". The rest is on the Slider page.

All 29 slider examples