HTML DOM input オブジェクト - range

HTML DOM Input Range オブジェクト：数値入力を精密に制御

この記事では、HTML DOM の <input type="range"> 要素について詳しく解説します。この要素は、指定された範囲内の数値をユーザーが直感的に選択できるスライダーを提供します。属性、メソッド、イベント、そして実際の使用例を通じて、インタラクティブなウェブページ構築に役立つこの要素の活用方法を学びましょう。

一、基礎知識

  • 用途： <input type="range"> 要素は、スライダーを作成するために使用されます。ユーザーはスライダーをドラッグすることで、指定された範囲内の値を選択できます。
  • デフォルト値： スライダーのデフォルト値は、min 属性（デフォルト値は0）と max 属性（デフォルト値は100）の間になります。
  • 表示方法： デフォルトでは、スライダーは水平方向に表示されますが、CSSを使用してスタイルをカスタマイズすることができます。

二、主要な属性

  • min: スライダーで許可される最小値を定義します。
  • max: スライダーで許可される最大値を定義します。
  • step: スライダーが移動するたびに変化する値を指定します。デフォルト値は1です。
  • value: 現在選択されている値を取得または設定します。
  • list: スライダーを <datalist> 要素に関連付け、定義済みの目盛りまたはオプションを表示します。

三、JavaScriptによる操作

  • スライダー要素へのアクセス： getElementById() や querySelector() などの標準的なDOMメソッドを使用します。
  • 値の取得と設定： value プロパティを使用して、スライダーの現在の値を取得または設定します。
  • 値の変化の監視： oninput イベントを使用して、スライダーの値が変化したときにJavaScriptコードを実行します。

四、イベント処理

  • oninput: スライダーの値が変更されると、このイベントが発生します。リアルタイムの値の更新や、関連する操作の実行に適しています。
  • onchange: スライダーの値が変更され、ユーザーがスライダーの操作を停止したときに、このイベントが発生します。フォームの送信や、その他の遅延操作の実行に適しています。

五、実用的なアプリケーション

  • 音量調節: オーディオやビデオプレーヤーで使用され、ユーザーが音量を調整することができます。
  • 明度/コントラスト調整: 画像エディタやディスプレイ設定で使用され、画像の明度やコントラストを制御します。
  • データの可視化: グラフやデータダッシュボードで使用され、データ範囲を設定したり、特定のデータポイントをフィルタリングしたりします。

六、まとめ

HTML DOM の <input type="range"> 要素は、開発者にとって、ユーザーから数値入力を取得するためのシンプルかつ強力な方法を提供します。属性、メソッド、イベントを理解することで、ユーザーエクスペリエンスを向上させるインタラクティブなウェブページ要素を簡単に作成できます。

コード例

<label for="volume">音量:</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">

属性一覧

属性 説明
min スライダーで許可される最小値を定義します。
max スライダーで許可される最大値を定義します。
step スライダーが移動するたびに変化する値を指定します。
value 現在選択されている値を取得または設定します。
list スライダーを <datalist> 要素に関連付け、定義済みの目盛りまたはオプションを表示します。

参考文献

Q&A

Q1: <input type="range"> 要素の値をJavaScriptで取得するにはどうすればよいですか？

A1: value プロパティを使用します。例えば、IDが "myRange" のスライダーの値を取得するには、次のコードを使用します。

var slider = document.getElementById("myRange");
var currentValue = slider.value;

Q2: <input type="range"> 要素の値が変更されたときに、何か処理を実行するにはどうすればよいですか？

A2: oninput イベントを使用します。例えば、IDが "myRange" のスライダーの値が変更されたときに、コンソールに値を出力するには、次のコードを使用します。

var slider = document.getElementById("myRange");
slider.addEventListener("input", function() {
  console.log(this.value);
});

Q3: <input type="range"> 要素を垂直方向に表示するにはどうすればよいですか？

A3: CSSを使用して、スライダーの向きを変更できます。例えば、次のCSSは、スライダーを垂直方向に表示します。

input[type=range] {
  -webkit-appearance: slider-vertical;
  width: 8px;
  height: 175px;
}