42755


下記のコード（完結しているためbodyの中身のみ抽出）を実行すると、inputの中身とそのvalueがコンソール画面に表示されますが、両者のvalueが合いません。具体的には先に出力される方のvalueは初期値のままで、後の方は変更後のvalueになります。

通常、valueの取得では

[code]

    .value
    
[/code]

を付けるので問題ありませんが、当然range自体も変わると思っていました。そこで、以下2点の疑問が生じ、調べてはみましたがそれに関する詳細を見つけられませんでした。

### 疑問

  * rangeに表示される値はrange.valueとは異なる格納方法のようだが、rangeのどこに格納されているのか
  * そもそもrangeやrange.valueはどのような構造（？）で格納されているのか

以上、ご回答お願いします。

[code]

    <input type="range" min="0" max="100" step="0.01" value="100" id="range" />
    <script>
      (function() {
        var range = document.getElementById("range");
        range.addEventListener("change",  function() {
          console.log(range);
          console.log(range.value);
        });
      })();
    </script>
[/code]


CC BY-SA 3.0
2018-03-29T11:58:04.000
42754
2018-04-06T08:04:24.513
2018-03-29T12:03:47.210
19110
27937
question
javascript html5
inputのvalueはどのように格納されている？


inputの **value Attribute（value=）** はコントロールの初期値です。

type="range"の時 range.valueは、 **表示されているslider control** の値です。

`<input>:`
入力欄（フォーム入力）要素（<https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input#attr-
value>）では、  
value コントロールの初期値です。この属性は type 属性の値が radio または checkbox である場合を除き、省略可能です。  
ページを再読み込みするとき、Gecko および IE は再読み込み前に値が変更された場合に HTML ソースで指定された値を無視する 点に注意してください。

HTML DOM Input Range
Object（<https://www.w3schools.com/jsref/dom_obj_range.asp>）では、  
value Sets or returns the value of the value attribute of a slider control

と書いてあります。


CC BY-SA 3.0
2018-03-29T14:02:53.213
42755
2018-03-29T14:02:53.213
22793
42754
answer