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

HTML DOM 入力レンジ（Range）のstepDown()メソッド徹底解説

HTML DOM Input Range stepDown()メソッドとは

HTML DOMのInput Range stepDown()メソッドは、スライダー（レンジ入力）コントロールの値を指定した数だけ減少させるために使用します。引数を省略した場合は1ずつ減少します。さらに、step属性が指定されている場合は、そのステップ値の倍数単位で値が減っていきます。例えば、step="20"が設定されている状態でstepDown(2)を実行すると、20×2＝40ずつ値が減少します。

構文

RangeオブジェクトのstepDown()メソッドの構文は以下の通りです。

rangeObject.stepDown(number)

ここでの「number」は、スライダー値の減少量を指定するためのパラメータです。指定しない場合は、デフォルトで1ずつ減少します。

使用例

それでは、range stepDown()メソッドの具体的な使用例を見ていきましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Input range stepDown() method</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>下のボタンをクリックするとスライダーの値が減少します</p>
<button type="button" onclick="stepDecrement()">DECREMENT</button>
<p id="Sample"></p>
<script>
    function stepDecrement() {
        document.getElementById("RANGE1").stepDown(10);
    }
</script>
</body>
</html>

出力結果

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

HTML DOM 入力レンジ（Range）のstepDown()メソッド徹底解説

DECREMENTボタンをクリックすると、次のようにスライダーの値が減少します。

HTML DOM 入力レンジ（Range）のstepDown()メソッド徹底解説

コードの解説

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

まず、type="range"、id="RANGE1"、name="VOL"という属性を持つ入力フィールドを、フォーム要素の中に作成しています。

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

次に、ユーザーがクリックするとstepDecrement()メソッドを実行する「DECREMENT」ボタンを作成しました。

<button type="button" onclick="stepDecrement()">DECREMENT</button>

stepDecrement()メソッド内部では、getElementById()メソッドにid「RANGE1」を渡すことでtype="range"の入力フィールドを取得し、その要素に対して減少値として10を指定したstepDown()メソッドを呼び出しています。これにより、ボタンをクリックするたびにスライダーの値が10ずつ減少していきます。

function stepDecrement() {
    document.getElementById("RANGE1").stepDown(10);
}

  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