レンジ入力欄の仕様input要素のtype属性にrangeを指定すると、スライダー、つまり範囲によって数値が入力できるようになります。第1回目では組み合わせて使う属性とともに、実装のための仕様を細かくチェックします。翔大郎フロントエンド・エンジニア次回このシリーズの記事一覧をみる目次レンジ入力欄とはレンジ入力欄で指定できる属性レンジ入力欄の初期値が決まる条件ここまでのまとめinput要素はtype属性値によって、さまざまな見た目、入力方法に変化します。本記事では、input要素のtype属性値をrangeにした状態である「レンジ入力欄」について解説します。次回は、スタイルをカスタマイズする方法を取り上げます。レンジ入力欄について解説します。レンジ入力欄とはレンジ入力欄は、input要素のtype属性値をrangeにすることで作成されます。最新のブラウザであれば、問題なく利用できます。type="range">)は、サム(thumb)*をつかんで動かし、ざっくりとした数値を指定できます。最大と最小を目安にしながら、どのあたりの数値を設定しているかも直感的に判断することができます。*注:サム(thumb)サムとはスライダー上にある「つまみ」のことです。音のボリュームや明るさの調節をするUIのように「だいたいこれくらいかな?」という感じで、感覚的に入力したいものに向いています。type="number">)が挙げられますが、それらは正確な値を入力したい場合に利用します。レンジ入力欄で指定できる属性レンジ入力欄には、最小値(min属性)や最大値(max属性)が設定できます。step属性を組み合わせることで、最小値から最大値の間の刻みの間隔をコントロールすることができます。実際に使いそうな例をいくつか挙げて解説します。何も指定しないまずinput要素のtype属性値にrangeを指定しただけの状態を見てみましょう。type="range">type属性のみ指定するソースコード新規タブで開くこのレンジ入力欄では、0から100の範囲の数値を指定できます。最小値が0で、最大値が100であるかは、省略されたmin属性とmax属性の初期値が関係しています。min属性が省略されているので、最小値は「min属性の初期値である0」になります。次に、max属性も省略されているので、最大値は「max属性の初期値である100」となるのです。min="10">と、min属性だけを指定した場合は、最小値が10で、最大値が100のレンジ入力欄となります。サムの初期位置は中央になり、0から100の間である50を示す位置になります。このinput要素のvalue属性の初期値は50となっています。最小値と最大値を指定するレンジ入力欄に最小値と最大値を指定するにはmin属性とmax属性を記述します。max="5">min属性とmax属性を指定ソースコード新規タブで開くmin属性値(最小値)に1、max属性値(最大値)に5を指定しました。することで、1から5の5段階評価に使うこともできます。1から5の5段階ですから、サムの初期位置は中央になり、初期値は3となります。最小値を1、最大値を6にした場合、サムの初期位置や初期値はどうなるのでしょうか。max="6">min属性とmax属性を指定(2)ソースコード新規タブで開くデモを見ると、サムは中央よりも右に位置しており、初期値は4となります。その理由は後述します。ステップ数を指定する入力の際に刻むステップ数はstep属性で指定できます。何かの評価をするときに、1から5の範囲で調整したいが、2.5という刻みがほしい、という場合に使えます。step="0.5">step属性を指定するソースコード新規タブで開くstep属性の初期値は1です。属性値には小数点を指定することができるため、step="0.5"とすれば0.5刻みに、step="0.01"とすれば0.01刻みにできます。datalist要素で目盛りを表示する入力候補一覧を作成できるdatalist要素と、レンジ入力欄を組み合わせることができます。組み合わせ例を見てみましょう。value="100"></datalist>目盛りを表示するソースコード新規タブで開くレンジ入力欄の上に、option要素で指定した分の目盛りとして表示されます。目盛りの見た目や実装状況は、ブラウザやOSごとに異なります。筆者が確認した環境ではChrome、Edge、IE11で目盛りが表示されました。レンジ入力欄の初期値が決まる条件ここまでの説明でmin属性とmax属性の使い方がイメージできるようになりました。次にレンジ入力欄の初期値について考えてみます。初期値について仕様書には、次のように記述されていました。デフォルト値は、最小値に最小値と最大値の差の半分を加えたものである。最大値が最小値よりも小さい場合を除き、この場合デフォルト値が最小値となる。Range状態(type=range)つまり一般化すると、次のような表現ができます。2)}ここに、min属性値1、max属性値6を当てはめてみましょう。3.5}計算上は初期値が3.5になるはずですが、3.5を取ることはできません。いうのもstep属性が未指定なので、現在のstep属性値は初期値の1です。すると、取る値は1刻みの値にならなくてはなりません。近いのは3か4ですが、この場合は4となります。仕様書では、次のような記述になっています。infinity)にもっとも近い数字を使わなければならないのですから、2つの数字のうち、より大きい数字を取ることになります。step属性値が0.5であれば、初期値はそのまま3.5となります。いったことから、value属性値が指定されていた場合であっても、指定したmin/max/step属性の値によっては指定したvalue属性値が無視される場合があります。その例を見てみましょう。value="50">valueで指定した値にならない?ソースコード新規タブで開くHTML上では、最小値が0、最大値が100、ステップ数が20、このinputの初期値(value属性値)は50の指定になっています。先ほどの計算式からは初期値は50であると求められます。デモで確認すると指定どおりにはならず、初期値は60です。ここで初期値が実際に取り得る値を考えてみましょう。100のどれかの値になります。素直に初期値の50にはなりません。50にもっとも近い値は40か60ですが、大きいほうの数字、60が初期値となります。ここまでのまとめ今回はinput要素にrangeというtype属性を指定してつくられる「レンジ入力欄」の仕様を解説しました。最小値、最大値の指定や、スライダー(範囲)にステップを設けた場合、初期値(サムの場所)はどのように決定されるかなど、少し細かい知識まで押さえました。次回はレンジ入力欄の見た目をカスタマイズする方法を解説します。翔大郎フロントエンド・エンジニア大手ソフトウェアダウンロード販売会社、Web制作会社などで、マークアップエンジニア、プログラマ、サービス企画、ディレクターを経験。2013年、株式会社ピクセルグリッドに入社。HTML、CSS、JavaScriptなどをオールラウンドに担当。プログラマブルなCSSの設計、実装を得意とする。PANIC」は、JavaScriptを一切使わず、HTMLとCSSのみで実装。海外サイトで紹介されるなど話題となった。特定商取引法に基づく。