HTML Range Elemanından Nasıl Veri Alınır?

HTML Range elemanı kullanımı için basit bir örnek

HTML Range elemanı aslında input nesnesinin bir özelliğidir. input nesnesinin type özelliğini range olarak ayarkayarak onu bir aralık seçiciye çevirebilirsiniz. bu işlemi yaptıktan sonra input nesnesi bir range elemanı şeklinde sayfada görüntülenir. Kullanıcı mouse ile üzerine gelip çizgi üstünde ileri gerei kaydırarak belirlediğiniz aralıkta istediği değeri ayarllar. Size kalan tek şey range elemanından değerleri javascipt ile almak.

Range elemanında değerler nasıl alınır? Fare sürükledikçe değerlerin değiştirilmeri/güncellenmesi nasıl sağlanır?

Örnek kodlama aşağıdaki gibidir

<form>

  <label for="vol">0 ile 50 arası bir değer belirleyin:</label><br/><br/>

  0  <input type="range" id="vol" name="vol" min="0" max="50"> 50

</form>

Range elemanının değerini bu kutucuğa yazdıralım.<br/><br/>

<div style="height:30px;display:block;float:left;text-align:center;line-height:30px;margin-right:5px;" >Seçilen değer : </div><div id="gst" style="width:30px;height:30px;border:solid 1px #f000f0;display:inline-block;text-align:center;line-height:30px;"></div>

<script>

window.addEventListener("load",function(){

var elem = 0;

var elemHand;

elem = document.getElementsByName("vol")[0].value;

elemHand=document.getElementsByName("vol")[0];

elemHand.onmousedown=function(){

elem = document.getElementsByName("vol")[0].value; // mouseye tıklandığında değeri yaz

     document.getElementById("gst").innerHTML=elem;

  this.onmousemove=function(){ // fare hareket ettiğinde değeri değiştir.

  elem = document.getElementsByName("vol")[0].value;

  document.getElementById("gst").innerHTML=elem;

}

}

});

</script>

Kodun çalışan Hali

0 ile 50 arası bir değer belirleyin:

0 50

Range elemanının değerini bu kutucuğa yazdıralım.

Seçilen değer :