Sayısal Aralık Giriş Kutusu ve Bağlı Ölçek Oluşturma
Bu makalede, HTML ve JavaScript kullanarak bir sayısal aralık giriş kutusuna bağlı bir ölçek nasıl oluşturulacağını adım adım öğreneceğiz. Sayısal aralık giriş kutuları, belirli bir aralık içinde değer seçmenize olanak tanır. Bu, web uygulamalarında, örneğin ses seviyesini, parlaklığı veya başka ayarları ayarlamak için kullanılabilir. Bağlı bir ölçek, kullanıcının seçtiği değeri görsel olarak göstererek daha iyi bir kullanıcı deneyimi sunar.
Temel HTML Yapısı
Öncelikle, sayısal aralık giriş kutusu ve ölçek için temel HTML yapısını oluşturalım:
“`html
“`
* **`range-container`:** Giriş kutusu ve ölçek elemanlarını içeren kapsayıcı div.
* **`range-input`:** Sayısal aralık giriş kutusu.
* **`type=”range”`:** Giriş kutusu türünü ayarlar.
* **`min=”0″`:** Minimum değeri tanımlar.
* **`max=”100″`:** Maksimum değeri tanımlar.
* **`value=”50″`:** Başlangıç değerini ayarlar.
* **`scale`:** Ölçek elemanlarını içeren div.
* **`scale-bar`:** Ölçek çubuğunu temsil eden div.
* **`scale-value`:** Seçilen değeri gösteren div.
JavaScript ile Etkileşim
Şimdi, JavaScript kullanarak giriş kutusu ve ölçeği birbirine bağlayacağız.
“`javascript
const rangeInput = document.getElementById(‘range-input’);
const scaleBar = document.querySelector(‘.scale-bar’);
const scaleValue = document.querySelector(‘.scale-value’);
rangeInput.addEventListener(‘input’, (event) => {
const value = event.target.value;
scaleBar.style.width = `${value}%`;
scaleValue.textContent = value;
});
“`
Bu kodda:
* **`rangeInput`**: Giriş kutusu elemanını seçiyoruz.
* **`scaleBar`**: Ölçek çubuğu elemanını seçiyoruz.
* **`scaleValue`**: Seçilen değeri gösteren elemanı seçiyoruz.
* **`input` olayı:** Giriş kutusu değeri değiştiğinde tetiklenen olay.
* **`event.target.value`**: Giriş kutusu tarafından ayarlanan değeri elde ediyoruz.
* **`scaleBar.style.width`**: Ölçek çubuğunun genişliğini ayarlıyoruz.
* **`scaleValue.textContent`**: Seçilen değeri güncelliyoruz.
Ek Özellikler
İsteğe bağlı olarak, kullanıcı deneyimini daha da iyileştirmek için ek özellikler ekleyebilirsiniz:
* **Gölgeli Öğe:** Ölçek çubuğuna bir gölge ekleyerek daha üç boyutlu bir görünüm sağlayabilirsiniz.
* **Görsel İpucu:** Giriş kutusu üzerine fareyle gelindiğinde seçilen değeri gösteren bir görsel ipucu ekleyebilirsiniz.
* **Özel Biçimlendirme:** Ölçeği kendi ihtiyaçlarınıza göre özelleştirebilirsiniz.
Özet
Bu makalede, bir sayısal aralık giriş kutusuna bağlı bir ölçek nasıl oluşturulacağını öğrendik. HTML ve JavaScript kullanarak kullanıcı dostu ve etkileşimli bir arayüz oluşturabilirsiniz. Bu teknik, web uygulamalarınızda çeşitli ayarları ve seçenekleri sunmanıza olanak sağlar.
Faydalı Kaynaklar
Daha fazla bilgi edinmek için aşağıdaki kaynakları inceleyebilirsiniz:
* HTML Range Input
* MDN – Input Range
* Fatih Soysal’ın Kişisel Web Sitesi
#Etiketler
#Sayısal Aralık Giriş Kutusu #Ölçek #HTML #JavaScript #Kullanıcı Arayüzü #Web Uygulamaları #Programlama #Web Geliştirme #Fatih Soysal #Programlama Öğreticisi