<input>要素の"range"型

<input>要素の”range”型

フォーム内に「所定の範囲内の数値」を入力させる際に使用されます。number型 とは異なり、テキストボックス上の入力欄ではなく、スライダーやダイヤルコントロールを用いて表示されます。
number型のように、直接数値を入力するのではなく、音量など「数値で入力させたいが、ユーザーは具体的な数値を意識しない」ような場合に、range型 を使うことができます。
対応していないブラウザの場合は、単なる text型 として扱われます。

属性

<input> 要素の range型 では、以下の属性が使用できます。

value

入力欄の初期値を設定します。また、フォームの送信時には選択された値が設定されています。

max

入力できる、最も大きい数値を指定します。

min

入力できる、最も小さい数値を指定します。

step

値を調整する時の刻み値を指定します。

サンプル

See the Pen dyyPLxK by Masahiko Iwakiri (@m-iwakiri) on CodePen.