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

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

HTML DOM Input Rangeのminプロパティとは

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

構文

minプロパティの構文は以下の通りです。

minプロパティの値を設定する場合

rangeObject.min = number

ここで、numberはスライダーコントロールに設定する最小値を表します。

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

rangeObject.min

サンプルコード

Input Rangeのminプロパティの使用例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Range min property</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL" min="15">
</form>
<p>Get the minimum value for the above slider by clicking the below button.</p>
<button type="button" onclick="minVal()">GET MIN</button>
<p id="Sample"> </p>
<script>
    function minVal() {
        var R=document.getElementById("RANGE1").min;
        document.getElementById("Sample").innerHTML = "The minimum value for this range slider is "+R;
    }
</script>
</body>
</html>

出力結果

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

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

「GET MIN」ボタンをクリックすると、次のようにスライダーの最小値が表示されます。

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

コードの解説

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

まず、type="range"、id="RANGE1"、name="VOL"を持ち、min属性値が「15」に設定された入力フィールドをフォーム内に作成しています。

<form>
VOLUME <input type="range" id="RANGE1" name="VOL" min="15">
</form>

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

<button type="button" onclick="minVal()">GET MIN</button>

minVal()メソッドでは、getElementById()メソッドを使ってtype属性がrangeの入力フィールドを取得し、そのmin属性値を参照します。スライダーが取り得る最小値を表す戻り値は変数Rに代入され、その後、innerHTMLプロパティを通じてid「Sample」の段落内に結果として表示されます。

function minVal() {
    var R= document.getElementById("RANGE1").min;
    document.getElementById("Sample").innerHTML = "The minimum value for this range slider is "+R;
}

このように、minプロパティを活用することで、JavaScriptからレンジスライダーの最小値を動的に取得・変更できるため、フォームのバリデーションや動的なUI制御に役立ちます。


  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