Bootstrap, kullanıcıların bir değer aralığı seçmesine olanak tanıyan range (kaydırıcı) bileşenini destekler. Range bileşeni, kullanıcıların değerleri görsel bir kaydırıcı ile ayarlamasını sağlar. Bu bileşen genellikle fiyat aralığı gibi ayarlamalar yapmak için kullanılır. İşte Bootstrap ile range bileşeninin nasıl kullanılacağına dair bir rehber:
1. Range Bileşeni
Range bileşeni, HTML'deki <input> etiketinin type="range" özelliği ile oluşturulur. Aşağıda basit bir örnek yer almaktadır:
<div class="form-group">
<label for="rangeInput">Değer Aralığı</label>
<input type="range" class="form-range" id="rangeInput" min="0" max="100" value="50">
<small>Seçilen Değer: <span id="rangeValue">50</span>
</small>
</div>
2. Range Bileşeninin Özellikleri
-
min: Kaydırıcının alabileceği en küçük değeri belirtir. -
max: Kaydırıcının alabileceği en büyük değeri belirtir. -
value: Kaydırıcının başlangıç değerini belirtir. -
class="form-range": Bootstrap tarafından sağlanan stil sınıfıdır.
3. Değeri Gösterme
Kullanıcı kaydırıcıyı hareket ettirdiğinde seçilen değeri güncellemek için JavaScript kullanabilirsiniz. Aşağıda, kaydırıcı ile seçilen değeri dinamik olarak gösteren bir örnek verilmiştir:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Range Örneği</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script>
function updateValue(value) {
document.getElementById('rangeValue').innerText = value;
}
</script>
</head>
<body>
<div class="container mt-5">
<h2>Range Kaydırıcı Örneği</h2>
<form>
<div class="form-group">
<label for="rangeInput">Değer Aralığı</label>
<input type="range" class="form-range" id="rangeInput" min="0" max="100" value="50" oninput="updateValue(this.value)">
<small>Seçilen Değer: <span id="rangeValue">50</span>
</small>
</div>
<button type="submit" class="btn btn-primary">Gönder</button>
</form>
</div>
</body>
</html>
4. Örnek Açıklaması
-
HTML Yapısı:
<input type="range">elementi kaydırıcıyı oluşturur. Kullanıcı kaydırıcıyı hareket ettirdikçe,oninputolayını kullanarakupdateValuefonksiyonu çağrılır. -
JavaScript Fonksiyonu:
updateValuefonksiyonu, kaydırıcının mevcut değerini alır ve sayfadaki ilgili<span>elementinin içeriğini günceller.
5. Özelleştirme
Bootstrap ile birlikte range bileşenini özelleştirmek için CSS kullanabilirsiniz. Örneğin, kaydırıcının rengini ve boyutunu değiştirmek mümkündür:
.form-range {
background-color: #f0f0f0; /* Arka plan rengi */
border-radius: 5px; /* Kenar yuvarlama */
}
Özet
Bootstrap ile range kaydırıcı bileşenini kullanarak kullanıcıların bir değer aralığını görsel olarak seçmelerini sağlayabilirsiniz. Bu bileşen, etkileşimli formlar oluşturmak için etkili bir yöntemdir. Kaydırıcının değerini dinamik olarak göstermek için JavaScript kullanarak kullanıcı deneyimini artırabilirsiniz. Daha fazla bilgi ve detaylar için Bootstrap Belgeleri sayfasını ziyaret edebilirsiniz.