Slider
İşaretler ve semantik renkler destekleyen sayısal aralık kontrolü.
Slider.tsx
Kapasite Yoğunluğu (Sage)72%
Ses Seviyesi (Success)85 dB
Kurulum
shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:
$
npx shadcn@latest add https://ui.cagriozay.com.tr/r/slider.jsonKullanım Örneği
import { Slider } from "@/components/ui/Slider"
<Slider label="Ses" value={volume} onChange={setVolume} marks={[{ value: 50, label: "Orta" }]} />Özellikler & Parametreler (API)
| Prop | Tür | Varsayılan | Açıklama |
|---|---|---|---|
| value | number | — | Kontrollü değer. |
| onChange | (value: number) => void | — | Değer değişikliği callback'i. |
| min | number | 0 | Minimum değer. |
| max | number | 100 | Maksimum değer. |
| step | number | 1 | Artış adımı. |
| label | ReactNode | — | Range alanına bağlanan etiket. |
| marks | SliderMark[] | — | Klavye erişimli hazır değer düğmeleri. |
| unit | string | "" | Görünen değer birimi. |