概要

<input> 要素の range タイプの値を別の要素へ表示するサンプルコード
Chromeで確認。IEは動かないと思われます

コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <script type="text/javascript">
  window.onload = () => {
      // (1)イベントを設定
      for (var element of document.getElementsByClassName('range')) {
          element.addEventListener('input', (event) => {
              // (2)ソース要素のvalueを次（隣）の要素のinnerHTMLへセット
              event.srcElement.nextElementSibling.innerHTML = event.srcElement.value;
          });
      }
      // (3)初期表示するためにイベントを起こす
      for (var element of document.getElementsByClassName('range')) {
          element.dispatchEvent(new Event('input'));
      }
  }
  </script>
</head>
<body>
  <div>
    <label>range A</label>
    <input type="range" class="range" value="50"><span></span>
  </div>
  <div>
    <label>range B</label>
    <input type="range" class="range" value="50"><span></span>
  </div>
</body>
</html>

説明

html部

rangeタイプのinput要素を2つ配置しています
- （「1つだけ対応する」と「2つ以上を対応する」とではアプローチが異なる場合がよくあります）
input要素の次（隣）に値表示用のspan要素を配置しています
- サンプルを単純にするため、位置で決め打ちにしています

script部

(1)イベントを設定

rangeクラスの要素全てに input イベントリスナーを設定しています

(2)値の表示

(1)のイベント処理です
srcElementはつまり <input type='range' class='range'> になります
srcElementの値(value)を、srcElementの隣の要素、この場合は表示用のspan要素にセットしています

(3)初期表示

ページロード時、同じ処理を通して値を表示するため、input イベントを起こしています
- 処理部分を切り出してcallのほうが良いかもしれません

リンク

MDN <input type="range">

input要素のrangeタイプの値を別の要素へ表示するサンプルコード

概要

コード

説明

html部

script部

(1)イベントを設定

(2)値の表示

(3)初期表示

リンク