HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM Input Range の max プロパティとは？使い方をサンプル付きで解説

HTML DOM の Input Range max プロパティは、レンジスライダー（type="range" の入力コントロール）における max 属性の値を設定または取得するために使用されます。

max 属性はスライダーが取り得る最大値を示すもので、通常は min プロパティと組み合わせて使用することで、スライダーが動ける値の範囲（最小値〜最大値）を定義します。

構文

max プロパティに値を設定する場合

rangeObject.max = number

ここで number は、スライダーコントロールの最大値を表します。

max プロパティの値を取得する場合

var value = rangeObject.max

サンプルコード

それでは、Input Range の max プロパティを使用した具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Range max property</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL" max="75">
</form>
<p>下のボタンをクリックすると、スライダーの最大値を取得できます。</p>
<button type="button" onclick="maxVal()">GET MAX</button>
<p id="Sample"> </p>
<script>
    function maxVal() {
        var R= document.getElementById("RANGE1").max;
        document.getElementById("Sample").innerHTML = "このスライダーの最大値は "+R+" です";
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、次のような画面が表示されます。

HTML DOM Input Range の max プロパティとは？使い方をサンプル付きで解説

GET MAX ボタンをクリックすると：

HTML DOM Input Range の max プロパティとは？使い方をサンプル付きで解説

コードの解説

上記の例では、以下のような処理を行っています。

1. レンジスライダーの作成

フォームの中に、type="range"、id="RANGE1"、name="VOL" を持ち、max 属性の値が 75 に設定された入力フィールドを作成しています。

<form>
VOLUME <input type="range" id="RANGE1" name="VOL" max="75">
</form>

2. ボタンの作成

次に、ユーザーがクリックすると maxVal() メソッドを実行する「GET MAX」ボタンを作成しています。

<button type="button" onclick="maxVal()">GET MAX</button>

3. 最大値の取得と表示

maxVal() メソッドでは、getElementById() メソッドを使って range タイプの入力フィールドを取得し、その max 属性の値を読み取ります。取得された値（スライダーが取り得る最大値）は変数 R に代入され、その後 innerHTML プロパティを使って、id が「Sample」の段落要素に表示されます。

function maxVal() {
    var R= document.getElementById("RANGE1").max;
    document.getElementById("Sample").innerHTML = "このスライダーの最大値は "+R+" です";
}

まとめ

Input Range の max プロパティを使えば、JavaScript からスライダーの最大値を動的に取得したり変更したりすることができます。音量調整や評価入力など、範囲指定が必要な UI を実装する際には、min プロパティと併せて活用すると便利です。

  1. HTML DOM Input Rangeのnameプロパティとは？設定方法と実例付きで解説

    HTML DOMのInput Range（入力レンジ）オブジェクトのnameプロパティは、レンジ（範囲）入力フィールドのname属性を設定または取得するために使用されます。name属性は、フォームデータがサーバーへ送信された後にデータを識別するための重要な役割を果たします。また、JavaScript側でもname属性を利用してフォーム要素を参照し、後から動的に操作することができます。構文nameプロパティを設定する場合rangeObject.name = name引数として渡すnameには、レンジスライダーコントロールの名前を指定します。使用例それでは、Input Rangeのnameプロパテ

  2. HTML DOM Input Rangeのminプロパティとは?構文と使い方を解説

    HTML DOM Input RangeのminプロパティとはHTML DOMのInput Range minプロパティは、レンジスライダーコントロールのmin属性値を設定または取得するために使用されます。この属性はスライダーコントロールの最小値を示すもので、通常はmaxプロパティと組み合わせて、スライダーが移動できる値の範囲を定義する際に活用されます。構文minプロパティの構文は以下の通りです。minプロパティの値を設定する場合rangeObject.min = numberここで、numberはスライダーコントロールに設定する最小値を表します。minプロパティの値を取得する場合rangeO