Sayfa içeriği
Seçim aralığın konsepti
Seçim aralığı (range), belirli bir aralıktaki, örneğin 0'dan 100'e kadar olan sayısal değerleri seçmeye ayrılmış bir çubuktur. Bu çubuk, bir değer seçmek için hareket ettirilebilen bir düğmeye sahiptir (kaydırıcı kontrolü gibi).
Seçim aralığı eklemek
Bir seçim aralığı eklemek için <input> etiketini <input type="range"> olarak ekleyebilirsin.
<input> etikete aşağıdaki özellikleri ekleyebilirsin:
- id: <label> etiketi ile ilişkilendirmek istiyorsan id eklemelisin.
- name: Gönder butonuna tıklandığında içinde seçilen değerin gönderilmesi için ekliyoruz.
- value: Temel bir değer vermek için.
- min: Seçilebilecek en küçük değeri belirtir.
- max: Seçilebilecek en büyük değeri belirtir.
- step: Kaydırıldıkça değerinin ne kadar değişeceğini belirtir.
- disabled: Inaktif görünmesini sağlamak için.
Aşağıdaki örnekte 0 ile 99 arasında değişebilen ve varsayılan değeri 18 olan bir değer aralığı gösterdim ve eğer değeri kaydırırsan 1 değeri ile değişecektir.
- <label for="age">0 ile 99 arasında senin yaşın seç:</label>
- <input type="range" id="age" name="Yaş" min="0" max="99" step="1" value="18">
Aşağıdaki örnekte 0 ile 20 arasında değişebilen ve varsayılan değeri 10 olan bir değer aralığı gösterdim. Eğer değeri kaydırırsan 4 değeri ile değişecektir.
- <label for="ses">0 ile 20 arasında istediğin ses yüksekliği seç:</label>
- <input type="range" id="ses" name="Ses" min="0" max="20" step="4" value="10">
Aşağıdaki örnekte 0 ile 100 arasında bir seçim aralığı ve varsayılan değeri 0 olan bir seçim aralığı gösterdim.
Burada aralığı "disabled" inaktif hale getiriyoruz ve bu nedenle değeri değiştirilemez.
- <label for="ses">0 ile 100 arasında senin puanı seç:</label>
- <input type="range" id="puan" name="puan" min="0" max="100" step="1" value="0">