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

HTML DOM 入力範囲（Range）の step プロパティとは？使い方を解説

HTML DOM の Input Range step プロパティは、スライダーコントロール（<input type="range">）の step 属性値を設定または取得するために使用されるプロパティです。

step プロパティでは、スライダーが 1 回の操作でどれだけ移動するかを指定します。さらに、max 属性と min 属性を step プロパティと組み合わせて使うことで、有効な値の範囲を柔軟に定義することができます。

構文

step プロパティを設定する場合

rangeObject.step = number

ここで指定する number は、スライダーコントロールの 1 回あたりの移動量を表します。デフォルト値は 1 です。

サンプルコード

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

<!DOCTYPE html>
<html>
<body>
<h1>Input range step Property</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>下のボタンをクリックして、上のレンジコントロールの step プロパティ値を変更してください</p>
<button type="button" onclick="changeStep()">CHANGE</button>
<p id="Sample"></p>
<script>
    function changeStep() {
        document.getElementById("RANGE1").step = "30";
        document.getElementById("Sample").innerHTML = "step 属性の値は現在 30 です";
    }
</script>
</body>
</html>

実行結果

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

HTML DOM 入力範囲（Range）の step プロパティとは？使い方を解説

CHANGE ボタンをクリックした後：

HTML DOM 入力範囲（Range）の step プロパティとは？使い方を解説

コードの解説

上記のサンプルコードの処理内容を順番に見ていきましょう。

1. レンジ入力フィールドの作成

まず、フォーム内に type="range"、id="RANGE1"、name="VOL" を持つ入力フィールドを作成しています。この時点では、step プロパティの値はデフォルトの 1 に設定されています。

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

2. CHANGE ボタンの設置

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

<button type="button" onclick="changeStep()">CHANGE</button>

3. changeStep() メソッドの処理内容

changeStep() メソッドでは、getElementById() メソッドに id「RANGE1」を渡すことで、対象のレンジ型入力フィールドを取得します。要素を取得した後、その step プロパティを 30 に設定します。

これにより、スライダーが 1 回の移動で動く幅が大きくなります。min の初期値は 0、max の初期値は 100 であるため、step を 30 に変更すると、スライダーが取れる位置は 0、30、60、90 といった限られた箇所のみになります。

function changeStep() {
    document.getElementById("RANGE1").step = "30";
    document.getElementById("Sample").innerHTML = "step 属性の値は現在 30 です";
}

まとめ

step プロパティを使えば、JavaScript からスライダーの刻み幅を動的に制御できます。min・max 属性と組み合わせることで、ユーザーが選択できる値を細かく制御できるため、音量調整や評価入力など、さまざまな 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