Skip to content

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

Free

With Preset Values Slider for Vue

A Level slider at 50 with five buttons under the track that jump straight to 0, 25, 50, 75, or 100.

UI library: Ark UI

Level and 50 sit above the track. Under it, outline buttons read 0, 25, 50, 75, and 100.

Use it when a few values come up often and the slider covers the rest. A Toggle Group is enough if only those five exist. In Vue, Ark UI does not render the preset 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-4">
  <div class="flex items-center justify-between">
    <Label>Level</Label>
    <span class="text-muted-foreground text-sm tabular-nums">{{ value[0] }}</span>
  </div>
  <Slider :aria-label='["Level"]' @value-change="handleValueChange" :value="value" />
  <div class="flex gap-2">
    <Button
      v-for="preset in presets"
      class="flex-1"
      :key="preset"
      @click="handlePresetClick"
      size="sm"
      :value="String(preset)"
      variant="outline"
    >
      {{ preset }}
    </Button>
  </div>
</div>

FAQ

How do the buttons set the value?

Each button carries its preset as its value, and one shared handler reads it and stores it.

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. The Vue file binds :value and listens to @value-change, which receives details.value.

How are the buttons laid out?

A flex gap-2 row with flex-1 on each, so the five share the width equally.

Where do the presets come from?

A presets array at the top of the file: 0, 25, 50, 75 and 100.

How is the slider named?

The Level text is a visible Label, and the slider gets the same name with aria-label, so screen readers announce what it sets. On Ark UI, aria-label is a list with one name per thumb.

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="[Level]", value-change="handleValueChange" and value="value". The rest is on the Slider page.

Button

Sets v-for="preset in presets", key="preset", click="handlePresetClick", size="sm", value="String(preset)" and variant="outline". The rest is on the Button page.

All 29 slider examples