M.AIM.AISoloLabsUI Sözlüğü · Girdi

← UI Sözlüğü

Sürgü slider

bilinen diğer adları slider · range · kaydırıcı

Böyle diyorsan: "kaydırarak değer seçme çubuğu" · "fiyat aralığı çubuğu" → bunun adı sürgü.

Bir aralıktan kaydırarak değer seçtiren çubuk.

Sürgü, bir aralıktan kaydırarak değer seçtirir. Güçlü olduğu yer kesinlik değil KEŞİFTİR: kullanıcı fiyat aralığını gezerken sonuçların nasıl değiştiğini görür. Zayıf olduğu yer de aynı sebeptendir — parmakla ya da fareyle tam bir değeri tutturmak zordur, hele aralık genişse. Bu yüzden kesin değer isteyen yerlerde sürgü tek başına kullanılmaz; yanında yazılabilir bir alan bulunur ve ikisi birbirini günceller. İkinci kural görünürlükle ilgilidir: sürüklerken değer anlık görünmelidir, bırakınca değil; yoksa kullanıcı körlemesine gezer.

Kapsam: Bu madde değer SEÇTİREN kontrolü kapsar. Dolu bir çubukla ilerleme gösteren ama dokunulmayan öğe İlerleme Çubuğu maddesindedir; ikisi görsel olarak benzer, biri girdi diğeri çıktıdır.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı
Fiyat filtresi₺3.000
₺0₺10.000
Aşama aşama gezmek için okları ya da numaraları kullan.
YAPIM PROMPTU — AJANINA YAPIŞTIR
Fiyat filtresi slider'ı ekle: 0–10.000₺ aralığı, ₺100 adım, çift uçlu (min–max, uçlar birbirini geçemez); sürüklerken değer tutamacın üstünde canlı görünsün; klavye oklarıyla adım adım, PgUp/PgDn ile büyük adım; değişiklik listeyi debounce ile filtrelesin (her pikselde istek atmasın).
DEBUG PROMPTU — HUYSUZLANIRSA

Yapıştır, sonuna belirtiyi ekle — ajana klasik hata kalıplarını önden verir.

Slider'ım huysuz; klasikleri sırayla ele: (1) çift uçta min tutamacı max'ı GEÇEBİLİYOR (aralık negatif); (2) değer yalnız bırakınca güncelleniyor — sürüklerken kör; (3) her onChange'te API isteği — sürüklerken onlarca istek (debounce yok); (4) dokunmatik hedef 12px — parmakla tutturulamıyor; (5) step=1 bırakılmış, ₺3.847 gibi anlamsız değerler seçiliyor; (6) aria-valuenow yok. Belirti şu:
ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)
  • 1Raymin → max hattı

    Değer uzayı; dolu kısım seçimi gösterir.

  • 2Tutamaç(lar)thumb

    Sürüklenen daire; çift uçlu aralıkta İKİ tutamaç olur ve birbirini GEÇEMEMELİDİR.

  • 3Değer göstergesicanlı etiket

    Sürüklerken değer ANLIK görünmeli — bırakınca değil; yoksa kullanıcı körlemesine gezer.

  • 4Uç etiketleri₺0 — ₺10.000

    Aralığın sınırları; adım (step) veriye uygun seçilir (fiyatta ₺100, yaşta 1).

DURUMLAR — HANGİ HÂLDE NE OLUR
  • AVarsayılanvalue

    Başlangıç değeri. Makul bir yerde başlamalı: fiyat filtresinin sıfırdan başlaması kullanıcıya bilgi vermez, ortalama aralık verir.

  • BSürükleniyorinput olayı

    Değer ANLIK görünmeli. Ağır işi (sunucu sorgusu) her piksel değişiminde değil, kısa bir beklemeyle tetikle.

  • CKlavye odaklıok / PageUp / Home

    Oklar bir adım, PageUp-PageDown büyük adım, Home-End uçlara götürür. Bu davranış yerleşik range'de bedava gelir.

  • DÇift uçluiki tutamaç

    Aralık seçimi. Tutamaçlar birbirini GEÇEMEMELİ ve hangisinin tutulduğu görünmeli; yerleşik input bunu tek başına yapmaz, iki kontrol kurulur.

  • EDevre dışıdisabled

    Sürüklenemez. Sebebi görünür olmalı, yoksa kullanıcı ekranın donduğunu sanar.

KODDAKİ ADLARI
HTMLinput type=range + min/max/stepnative temel
ARIAaria-valuenow/-min/-maxokuyucu değeri bilir
ARIAaria-valuetext="₺2.500"ham sayı yerine okunur değer
UXcanlı değer + debouncegörünürlük + performans
ERİŞİLEBİLİRLİK & SIK HATA
  • Ekran okuyucuya ham sayı değil OKUNUR değer ver: aria-valuetext ile '2500' yerine '₺2.500' duyur. Yalnız valuenow bırakırsan kullanıcı neyin 2500'ü olduğunu bilemez.
  • Klavye davranışını koru: ok tuşları adım adım, PageUp/PageDown büyük adım, Home/End uçlar. Yerleşik input type="range" bunu hazır verir; taklit edersen elle yazmak zorundasın.
  • Tutamacın dokunma hedefi en az 24px olmalı (WCAG 2.5.8); görsel olarak küçük çizilse bile tutulabilir alan büyütülür.
  • Kesin değer gerekiyorsa sürgüyü tek başına bırakma: yanına yazılabilir bir alan koy. Sürgü keşif içindir, kesinlik için değil.
  • Adımı (step) veriye göre seç: fiyatta ₺100, yaşta 1. Çok ince adım kullanıcıyı hedefi tutturamamaya mahkûm eder.
SIK KARIŞTIRILANLAR

İlerleme çubuğundan farkı. Sürgü GİRDİdir, ilerleme çubuğu ÇIKTIdır. İkisi de dolu bir çubuk gösterir ama birine dokunulur ve değeri sen belirlersin, diğerine dokunulmaz ve değeri sistem bildirir. Ayırt etmenin en hızlı yolu tutamaçtır: tutamaç varsa sürgüdür, yoksa ilerleme. Dokunulmayan bir çubuğa tutamaç çizmek kullanıcıyı boşuna sürüklemeye davet eder.

İlerleme çubuğu sayfasına git →

Metin kutusundan farkı. Sürgü hızlı ama kabadır, metin kutusu yavaş ama kesindir. '₺2.847' yazmak isteyen kullanıcı sürgüyle bunu tutturamaz; buna karşılık 'ne kadar pahalı seçenekler var' diye gezinen kullanıcı için sürgü kutudan iyidir. Doğru cevap çoğu zaman ikisi birden: sürgü gezmek, kutu kesinleştirmek için.

Metin kutusu sayfasına git →

KAYNAKLAR
İLGİLİ PARÇALAR

İlerleme çubuğu progress barMetin kutusu inputForm alanı form field

AYNI AİLEDE · GIRDI