Bu konuda da HTML 5 ile gelen yeni input türlerinden olan range den bahsetmek istedim, RANGE kaydırma çubuğu kontrollü min ve max özellikleri ile tanımlanan aralıkta görsel olarak bir değer elde etmek için kullanılır.
Varsayılan Değerler
min : bu özellik aralığın en düşük değerini tanımlar.
max : bu özellik aralığın en yüksek değerini tanımlar.
step : tutmaç ileri veya geri çekildiği zaman min ve max arasındaki sayının kaçar kaçar artacağını veya eksileceğini tanımlar.
value : kısaca söylemek gerekirse " min + (max - min) / 2 "
Küçük bir ekran görüntüsünden sonra örneğimize başlayalım,
Şimdi de bir örnek;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 RANGE</title>
<script type="text/javascript">
var init=function(){
change();
/* sayfa yüklendiğinde kaydırma çubuğunun
ürettiği değeri göstermek için change()
Fonksiyonunu çalıştıralım*/
}
var change=function(){//formchange olayında çalışacak fonksiyon
/*
form elemanının sakladığı değerde(ya da görsel
olarak üretilen değerde) değişiklik olursa formchange olayı oluşur.
*/
var elSlider=document.querySelector("input[type='range']");
var elResult=document.querySelector("input[type='range']+input");
elResult.value=elSlider.value;
}
</script>
</head>
<body onload="init();">
<form action="" name="form1">
<input type="range" name="rng" max="100" min="20" step="5" onformchange="change();" />
<input type="text" size="5"/>
</form>
</body>