HTML5 inputタグのrange属性で数値選択スライダー

inputタグのtype属性でtype=”range”を指定すると、レンジ入力欄「数値を選べるスライダー」を作成することができます。oninput属性とOutput要素で選択結果を表示して、form送信するサンプルコードを記述しています。
oninput属性とOutput要素はほとんどの主要ブラウザで使用できますが、IEには対応していません。

環境

• OS windows10 64bit
• chrome 86.0.4240.198

<input type=”range”>

inputタグのrange属性はHTML5から追加されました。レンジ入力はスライダーで数値を選択するため、正確な数値の入力というよりは感覚的に指定してもらう場合に適した入力方法です。

<input type="range" name="samplerange" value="50" min="0" max="100" step="1">

<input type=”range”>のみでレンジ入力欄が表示されますが、min属性とmax属性で入力できる最小値と最大値を、step属性で入力欄で刻むステップ値を指定できます。

サンプルコード

form上でレンジ入力欄と選択した値を表示するサンプルコードです。

<section>

    <form action="xxx.php" method="post">
        <label>値を選択してください:
            <input type="range" name="samplerange" value="50" min="0" max="100" step="1"
            oninput="document.getElementById('output1').value=this.value">
        </label>
            <output id="output1">50</output>
    </form>

</section>

ブラウザ上で表示した結果