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

【HTML DOM】Input RangeのstepUp()メソッドの使い方を解説

HTML DOMのInput Range（type="range"）で利用できるstepUp()メソッドは、スライダーコントロールの現在値を指定した数だけ増加させるためのメソッドです。引数を省略した場合は1ずつ増加します。また、input要素にstep属性が指定されている場合は、そのstep値の倍数単位で値が増加します。たとえばstep="20"が設定されている場合、stepUp(2)を実行すると20×2＝40だけ値が増加します。

構文

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

rangeObject.stepUp(number)

numberは、スライダーの値をどれだけ増加させるかを指定する必須のパラメータです。省略した場合は1ずつ増加します。

使用例

それでは、stepUp()メソッドを使用した具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Input range stepUp() method</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>Increment the slider control value by clicking the below button</p>
<button type="button" onclick="stepIncrement()">INCREMENT</button>
<p id="Sample"></p>
<script>
    function stepIncrement() {
        document.getElementById("RANGE1").stepUp(10);
    }
</script>
</body>
</html>

出力結果

上記のコードを実行すると、次のような出力が得られます。

【HTML DOM】Input RangeのstepUp()メソッドの使い方を解説

INCREMENTボタンをクリックすると、以下のようにスライダーの値が変化します。

【HTML DOM】Input RangeのstepUp()メソッドの使い方を解説

コードの解説

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

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

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

次に、ユーザーがクリックするとstepIncrement()関数を実行するINCREMENTボタンを作成しました。

<button type="button" onclick="stepIncrement()">INCREMENT</button>

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

function stepIncrement() {
    document.getElementById("RANGE1").stepUp(10);
}

まとめ

stepUp()メソッドを使うことで、JavaScriptから簡単にスライダーの値を増加させることができます。なお、逆に値を減少させたい場合はstepDown()メソッドを使用します。音量調整などのフォーム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