Installation

pnpm dlx kliping@latest add slider

Usage

<script setup lang="ts">
import { Slider } from '@/components/ui/slider'
</script>

<template>
  <Slider :default-value="[33]" :max="100" :step="1" />
</template>

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@vueuse/core@^14.4.0, reka-ui@^2.10.3
Files	components/ui/slider/slider.vue components/ui/slider/index.ts

API Reference

Prop	Type	Default	Description
defaultValue?	number[]	—	The value of the slider when initially rendered. Use when you do not need to control the state of the slider.
modelValue?	number[]	—	The controlled value of the slider. Can be bind as v-model.
disabled?	boolean	—	When true, prevents the user from interacting with the slider.
orientation?	DataOrientation	—	The orientation of the slider.
dir?	Direction	—	The reading direction of the combobox when applicable. If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.
inverted?	boolean	—	Whether the slider is visually inverted.
min?	number	—	The minimum value for the range.
max?	number	—	The maximum value for the range.
step?	number	—	The stepping interval.
minStepsBetweenThumbs?	number	—	The minimum permitted steps between multiple thumbs.
thumbAlignment?	ThumbAlignment	—	The alignment of the slider thumb. - contain: thumbs will be contained within the bounds of the track. - overflow: thumbs will not be bound by the track. No extra offset will be added.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.
name?	string	—	The name of the field. Submitted with its owning form as part of a name/value pair.
required?	boolean	—	When true, indicates that the user must set the value before the owning form can be submitted.
ariaLabel?	string	—	Accessible name for the thumbs (role="slider"); with two thumbs, give each its own via thumbLabels.
thumbLabels?	string[]	—	Accessible name per thumb, by index; overrides ariaLabel.

Event	Payload	Description
@update:modelValue	[payload: number[] | undefined]	Emitted when the value changes.
@valueCommit	[payload: number[]]	Emitted when the user finishes changing the value (pointer up or key press).

Data attribute	Value
[data-slot]	"slider"

Keyboard Interactions

Perilaku keyboard-nya datang dari primitif Reka UI Slider yang dipakai komponen ini, mengikuti pola WAI-ARIA.

Key	Description
ArrowRight	Increases the value by the step amount.
ArrowLeft	Decreases the value by the step amount.
ArrowUp	Increases the value by the step amount.
ArrowDown	Decreases the value by the step amount.
PageUp	Increases the value by a larger step.
PageDown	Decreases the value by a larger step.
Shift + ArrowUp	Increases the value by a larger step.
Shift + ArrowDown	Decreases the value by a larger step.
Home	Sets the value to its minimum.
End	Sets the value to its maximum.

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --border, --muted, --primary, --ring.

Changelog

• 19 Okt 2026 · Fixed — Aksesibilitas: nama aksesibel dan peran ARIA yang sah.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.