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

HTMLの1つのrange入力で異なるstep属性を使い分ける方法

HTMLのinput要素におけるstep属性は、入力できる数値の間隔（刻み幅）を定義するための属性です。たとえば「0、2、4、6、8、10」のように、一定間隔で数値が増減する仕組みを作れます。また、min属性やmax属性と組み合わせることで、有効な値の範囲を柔軟に設定することも可能です。

本記事では、まずstep属性の基本的な使い方を確認したうえで、1つのrange入力の中で条件に応じて異なるstep属性を動的に切り替える方法を、JavaScript（jQuery）を使った実装例とともに解説します。

step属性の基本的な使い方

次のコードは、step属性を使って数値の刻みを作成するシンプルな例です。ここではステップを「2」に設定しているため、有効な入力値は2、4、6、8、10…となります。それ以外の数値を入力して送信ボタンを押すと、「有効な値を入力してください」というバリデーションメッセージが表示され、さらに最も近い2つの候補値も教えてくれます。

コード例

<!DOCTYPE html>
<html>
    <head>
        <title>HTML input step attribute</title>
    </head>
    <body>
        <form action = "/cgi-bin/hello_get.cgi" method = "get">
            <input type = "number" name = "points" step = "2"><br>
            <input type = "submit" value = "Submit">
        </form>
    </body>
</html>

このように、ネイティブのstep属性だけでも入力値の制御は可能ですが、単一のstep属性では固定された刻み幅しか指定できません。そこで、状況に応じて刻み幅を変えたい場合にはJavaScriptの出番です。

jQueryで異なるstep属性を動的に切り替える

1つのrange入力で異なるstep属性を実現するには、jQueryを活用します。以下の例では、10と2という2種類のステップを用意し、スライダーの現在値に応じて自動的に切り替えています。範囲は100〜450で、min属性とmax属性によって設定されています。

  • 値が205未満の場合：ステップは10ずつ移動
  • 値が205以上の場合：ステップは2ずつ移動

コード例

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
        </script>
        <script type="text/javascript">
            $(function() {
                $('#points').on('input change', function() {
                    var element = $('#points'),
                    value = element.val(),
                    step;
                    // ここにルールを設定
                    if (value < 205) {
                        step = 10;
                    }else {
                        step = 2;
                    }
                    element.attr('step', step);
                    $('#value').text(value);
                    $('#step').text(step);
                });
            });
        </script>
    </head>

    <body>
        <div>
            値: <span id="value"></span>
        </div>
        <div>
            現在のステップ: <span id="step"></span>
        </div>
        <div>
            <input id="points" type="range" value="100" min="100" max="450" />
        </div>
    </body>
</html>

仕組みのポイント

このコードの動作の鍵となるのは、inputイベントとchangeイベントを監視する部分です。スライダーが操作されるたびに現在の値を取得し、条件分岐によって適切なstep値を算出します。その後、element.attr('step', step)でstep属性を書き換えることで、同じrange入力でありながら段階ごとに異なる刻み幅を実現しています。

画面上には現在の値と適用中のステップがリアルタイムに表示されるため、挙動の確認にも便利です。この手法は「細かい調整が必要な高精度ゾーン」と「大きくざっくり動かしたいゾーン」が混在するUIなど、実務でも応用範囲の広いテクニックです。

  1. HTMLのlist属性とは？datalist要素で入力候補を表示する方法を解説

    HTMLのlist属性とはHTMLでは、<datalist>要素を使用して、あらかじめ定義された選択肢のリストを作成できます。このリストは<input>要素（入力欄）に対して適用され、ユーザーが文字を入力すると、定義済みの選択肢が候補として自動的に表示されます。<input>要素のlist属性は、対応する<datalist>要素のidを参照することで、入力欄と選択肢リストを関連付けます。このlist属性は、HTML5で新たに導入された機能です。list属性の基本的な使い方list属性を使うには、以下の2つのステップを行います。<datali

  2. HTMLの1つのrange入力で異なるstep属性を使い分ける方法

    HTMLのinput要素におけるstep属性は、入力できる数値の間隔（刻み幅）を定義するための属性です。たとえば「0、2、4、6、8、10」のように、一定間隔で数値が増減する仕組みを作れます。また、min属性やmax属性と組み合わせることで、有効な値の範囲を柔軟に設定することも可能です。 本記事では、まずstep属性の基本的な使い方を確認したうえで、1つのrange入力の中で条件に応じて異なるstep属性を動的に切り替える方法を、JavaScript（jQuery）を使った実装例とともに解説します。 step属性の基本的な使い方 次のコードは、step属性を使って数値の刻みを作成するシンプルな