javascript - Value of HTML input range, getattribute vs value -

i have created html input element type="range" , id="slider". why cannot access value using getattribute("value") method? debugger shows there attribute named "value" value not equal value of element. should not value of range element attribute?

var slidervalue1=document.getelementbyid("slider").getattribute("value"); var slidervalue2= document.getelementbyid("slider").value; 

why cannot access value using getattribute("value") method?

you can't because, .getattribute("value") return value of element write html (if don't change that, default value).

example:

with: <input type="range" id="slider" value="500">

document.getelementbyid("slider").getattribute("value"); return 500 if use input change range.

debugger shows there attribute named "value" value not equal value of element.

it's true, , right. if set default value never change (is useful reset input).

should not value of range element attribute?

no, current value of element stored outside html, access current vale must use: document.getelementbyid("slider").value;, it's same type of input not on range.

$(function(){      $("input[name=foo]").on("change",function(){          var val = $(this).val();          var attr = $(this).attr("value");          var prop = $(this).prop("value");          console.log(" --- jquery test js ----");          console.log("current value: (using .val)",val);          console.log("initial value: (using .attr)",attr);          console.log("current value: (using .prop)",prop);      });  });    //native js  function originaljs(){      console.log(" --- original js ----");      console.log("current value: (using .value)",this.value);      console.log("initial value: (using .attr)",this.getattribute("value"));  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>  <input type="range" onchange="originaljs.call(this)" name="foo" value="500"/>  <p>run , watch console :) ... watch value="500" (but range 0-100)</p>    <input type="text" onchange="originaljs.call(this)" name="foo" value="500"/>