Form · Range slider

Aralık seçici

Bir aralıktan yaklaşık bir sayı seçtirir. Seçilen değer her zaman yazıyla görünür.

CSS: kararlı
JavaScript: değer gösterimi
React: kararlı
Vue: kararlı

Örnekler

Temel Canlı örnek

En çok uzaklık

1 ile 50 kilometre arası.

10 km

HTML kodunu göster

<div class="trds-alan trds-aralik" data-trds="aralik" data-birim=" km">
  <label class="trds-etiket" for="uzaklik">En çok uzaklık</label>
  <p class="trds-yardim" id="uzaklik-yardim">1 ile 50 kilometre arası.</p>
  <div class="trds-aralik__satir"><input class="trds-aralik__girdi" id="uzaklik" name="uzaklik" type="range" min="1" max="50" step="1" value="10" aria-describedby="uzaklik-yardim"><output class="trds-aralik__deger" for="uzaklik">10 km</output></div>
  <div class="trds-aralik__uclar" aria-hidden="true"><span>1 km</span><span>50 km</span></div>
</div>

Ne zaman kullanılır

Kesin sayı gerekmeyen yerde kullanın: yarıçap, bütçe aralığı.
Kesin sayı için sayı girişi kullanın.

Erişilebilirlik

Yerel <input type="range">. Ok tuşları değeri değiştirir. Değer <output> ile bağlıdır.
Uçlar yazıyla belirtilir. Yalnız kaydırıcı yeterli değildir.

Karşılanan WCAG 2.2 ölçütleri 1.3.1 4.1.2

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: US, FR, NL, KR.