inputのvalueはどのように格納されている？

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

通常、valueの取得では

.value

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

疑問

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

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

<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>