Slider

FREE

Tek değer veya aralık, değer balonu, adımlar ve etiketli işaretler içeren kaydırıcı.

Canlı düzenle

Ayarları değiştir; bileşen ve kodu anında güncellensin.

Ayarlar

Aralık

En az

En çok

Adım

Değer balonu

Değer eki

İşaretler

Ana renk

Devre dışı

Kod

import { Slider } from "@/components/ui/slider";

<Slider
  defaultValue={[40]}
  showValue="active"
/>

Terminal

npx @bloxa/cli add slider
# or: npx shadcn@latest add @bloxa/slider

Otomatik kurulan paketler: radix-ui

Her bileşen, oluşturduğu HTML elemanının özelliklerini de kabul eder.

Özellik	Tip	Varsayılan	Açıklama
value / defaultValue	number[]	—	İki değer verilirse aralık seçilir.
min / max / step	number	0 / 100 / 1	Sınırlar ve adım.
showValue	"always" \| "active" \| false	false	Tutamaç üstünde değer balonu.
formatValue	(value: number) => string	—	Balon metnini biçimlendirir.
marks	{ value, label? }[]	—	Çizgi üzerindeki işaretler.
thumbLabels	string[]	—	Her tutamacın erişilebilir adı.