HTMLスライダーコントロールのスライダーの値 (つまみの位置)を取得する

ぐゎもう
質問: スライダーの値の取得
HTMLページにスライダーを設置して、値を取得したいです。どのようなコードを書けばよいですか?
HTMLスライダーコントロールのスライダーの値 (つまみの位置)を取得するコードを紹介します。

サマリ

HTMLスライダーのスライダーの値を取得する場合は、スライダーオブジェクトのvalue の値を取得します。
一般的にスライダーを利用する場合は、スライダーのつまみを変更したタイミングで新しいスライダーの位置を取得する場合が多いです。 スライダーが変更されたタイミングで値を取得する場合は、スライダーの onchange イベント、oninput イベントを利用します。

  • スライダの現在位置の取得は range.value プロパティを利用します
  • リアルタイム更新は input イベントを参照し、確定時に値を参照する場合は change イベントを利用します
  • 最小/最大/ステップは min max step 属性を利用します

記述例

<input id="volume" type="range" min="0" max="100" value="50">

<script>
  const slider = document.getElementById('volume');
  slider.addEventListener('input', e => {
    console.log(e.target.value);
  });
</script>

実装例

コード

以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script>
    function change_slider() {
      const slider = document.getElementById("slider1");
      const out_frame = document.getElementById("output");

      out_frame.innerText = slider.value;
    }
  </script>
</head>
<body>
  <p>スライダーコントロールの値の取得デモ</p>
  <input id="slider1" type="range" value="50" min="1" max="100" onchange="change_slider();"/>
  <p>スライダーの値</p>
  <div id="output"></div>
</body>
</html>

解説

HTMLスライダーコントロールの記述はこちらの記事を参照して下さい。
onchange 属性にスライダーが変化したときに呼び出す関数を設定します。今回の例ではchange_slider()関数を呼び出します。
change_slider 関数では、getElementByIdメソッドを呼び出し、スライダーオブジェクトの要素を取得します。
スライダーの値は、スライダーオブジェクトの value プロパティを参照します。
スライダーオブジェクトの value プロパティをid="output" の要素の位置に表示します。~
    function change_slider() {
      var slider = document.getElementById("slider1");
      var out_frame = document.getElementById("output");

      out_frame.innerText = slider.value;
    }

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
HTMLスライダーコントロールのスライダーの値 (つまみの位置)を取得する:画像1

スライダーをドラッグして位置を動かします。スライダーを移動させると、値が画面の下部に表示されます。
HTMLスライダーコントロールのスライダーの値 (つまみの位置)を取得する:画像2
HTMLスライダーコントロールのスライダーの値 (つまみの位置)を取得する:画像3

スライダーの位置を変更します。変更すると値も変化します。
HTMLスライダーコントロールのスライダーの値 (つまみの位置)を取得する:画像4

参考 : addEventListenerを利用する場合

addEventListenerメソッドを利用する場合のコードです。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script>
    window.onload = function () {
      const slider = document.getElementById("slider1");
      slider.addEventListener('change', change_slider, false);
    }

    function change_slider() {
      const slider = document.getElementById("slider1");
      const out_frame = document.getElementById("output");

      out_frame.innerText = slider.value;
    }
  </script>
</head>
<body>
  <p>スライダーコントロールの値の取得デモ</p>
  <input id="slider1" type="range" value="50" min="1" max="100"/>
  <p>スライダーの値</p>
  <div id="output"></div>
</body>
</html>

実行結果

HTMLファイルを表示し、ドラッグしてスライダーの位置を変更します。スライダーを変更するとページ下部の値も変化します。 先に紹介したonchangeい弁を利用した場合と同じ動作になります。
HTMLスライダーコントロールのスライダーの値 (つまみの位置)を取得する:画像5

ドラッグ中での値の更新

ぐゎもう
追加の質問: ドラッグ中に値が変わるようにしたい
先のプログラムでは、スライダーのドラッグを終えた際にページの値が更新されます。 ドラッグ中でも値が随時更新されるようにしたいです。

ドラッグ中に値を更新する場合には input イベント(oninput)を利用します。

コード

以下のコードのHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script>
    window.onload = function () {
      const slider = document.getElementById("slider1");
      slider.addEventListener('input', change_slider, false);
    }

    function change_slider() {
      const slider = document.getElementById("slider1");
      const out_frame = document.getElementById("output");

      out_frame.innerText = slider.value;
    }
  </script>
</head>
<body>
  <p>スライダーコントロールの値の取得デモ</p>
  <input id="slider1" type="range" value="50" min="1" max="100"/>
  <p>スライダーの値</p>
  <div id="output"></div>
</body>
</html>

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
HTMLスライダーコントロールのスライダーの値 (つまみの位置)を取得する:画像6

スライダーのドラッグ中にもページに表示されている値が変化する動作になります。
HTMLスライダーコントロールのスライダーの値 (つまみの位置)を取得する:画像7
AuthorPortraitAlt
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
作成日: 2021-04-11
Copyright © 1995–2025 iPentec all rights reserverd.