Components · Slider
Slider
Sürekli değer seçici. Sayısal alandan farkı: kullanıcı tam değere değil aralığa ihtiyaç duyarsa kullan (mesafe, fiyat aralığı, oran). Kesin sayı için input'a düş.
01 · Tek değer · sürtüşmeli durum
02 · Aralık (range) — fiyat filtresi
Kurallar
· Track 4px yükseklik, thumb 18×18 + 2px primary border, beyaz fill (kontrast). Hit alanı 24×24 (thumb dış halkası).
· Aktif bubble her zaman değeri göstermeli — sürükleme sırasında kullanıcı thumb pozisyonunu görsel olarak değil, sayısal olarak doğrular.
· Tick mark sadece anlamlı kademe varsa (mesafe = km dilimleri). Sürekli sayısal değerde (volume, opacity) tick koyma.
· Aralık (range): iki thumb, iç fill primary; thumb'lar geçemez (max ≥ min).
· Klavye: ←→ ±1, Shift+←→ ±10, Home/End uçlara. Range'de Tab thumb'lar arasında.
· Erişilebilirlik: role="slider" + aria-valuemin/max/now + aria-valuetext (örn. "45 lira").
· Yasak: küçük thumb (≤14px — dokunulmaz), bubble'sız sürükleme (kullanıcı değeri kaybeder), step:0.001 gibi sürekli mikro-step.