HTML slider, kullanıcıların bir aralık seçimini yapmasını sağlayan bir form kontrolüdür. Slider, web sayfalarında genellikle görsel bir aralık seçicisi olarak kullanılır ve kullanıcının bir kaydırıcıyı fare veya dokunmatik ekran kullanarak hareket ettirerek belirli bir aralığı seçmesine olanak tanır. Slider, birkaç HTML etiketi ve JavaScript kodu ile oluşturulabilir.
Aşağıda bir HTML slider kullanım örneği verilmiştir:
<label for="slider">Değer Seçin:</label>
<input type="range" id="slider" name="slider" min="0" max="100" step="1" value="50">
Bu örnekte, bir “label” etiketi kullanarak slider’ın yanında bir etiket oluşturulur ve slider’ın ne amaçla kullanıldığı belirtilir. “input” etiketi kullanarak bir slider oluşturulur. Slider, “range” türüne sahip olur ve “id”, “name”, “min”, “max”, “step” ve “value” özellikleri ile yapılandırılır. “min” ve “max” özellikleri slider’ın seçilebilecek en küçük ve en büyük değerleri belirler. “step” özelliği slider’da her adımda değiştirilebilecek değeri belirler. “value” özelliği ise slider’ın varsayılan değerini belirler.
Slider, CSS ve JavaScript ile de özelleştirilebilir. Örneğin, CSS ile slider’ın boyutu, renkleri ve stil özellikleri değiştirilebilir. Aşağıda bir örnek CSS kodu verilmiştir:
input[type="range"] {
width: 100%;
height: 30px;
border-radius: 10px;
background-color: #ddd;
}
input[type="range"]::-webkit-slider-thumb {
appearance: none;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #4CAF50;
cursor: pointer;
}
Bu CSS kodu, slider’ın boyutunu, yuvarlak köşelerini ve arka plan rengini belirler. “::-webkit-slider-thumb” yalnızca WebKit tabanlı tarayıcılarda çalışır ve slider’ın başparmağının (thumb) görünümünü ve rengini belirler. Bu örnek, bir slider’ın nasıl oluşturulacağı ve CSS ile nasıl stilize edileceği hakkında bir fikir verir.
