Slider

Isian tempat pengguna memilih nilai dari rentang tertentu.

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

<template>
  <Slider
    :default-value="[50]"
    :max="100"
    :step="1"
    class="w-[60%]"
  />
</template>

Instalasi

CLI

npx shadcn-vue@latest add slider

Manual

Pasang dependensi berikut:

npm install reka-ui

Salin dan tempel kode sumber di GitHub ke project Anda.

Sesuaikan path import dengan struktur project Anda.

Penggunaan

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

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