[49-6] input要素で「レンジ（割合）」を選んでもらおう(range)

<input type="range">で「レンジ（割合）」を選んでもらう部品を作りましょう。
これもHTML5からの新しいtype属性の値です。

レンジとは、ある一定範囲内の割合とか、度合いのこと。
例えば「満足度は何％ですか？」とか、「-5から+5までのどこですか？」など、範囲を決めて、その中での割合を選んでもらう場合に使います。

	type属性の値	部品の役割
<input>要素で作る 「レンジ」入力の部品	type="range"　 new	レンジ (割合) の入力

本日のINDEX

1. range で レンジ（割合）を入力してもらおう
   1. 全部デフォルト状態のサンプル
   2. range のスライダーを「縦」にする
   3. マイナスの値のレンジ、step属性でスライドの制限を
   4. 小数のレンジを min, max, step属性で作る
   5. list属性で レンジの選択肢を作る
2. <output>要素に range の結果を出力させる
3. ほかの属性で機能を追加できます

range で レンジ（割合）を入力してもらおう

rangeには下記のような決まりがあります。

• レンジの範囲は デフォルトで 0から100、初期値は50、ステップは1。
  （これは min="0" max="100" value="50" step="1" です）
• 範囲を min属性と max属性 で変更すると、その範囲のど真ん中が初期値になります。
  step属性を使っていて、ど真ん中がステップに合わないなら一番近い値が初期値です。
• 小数点以下の数値も使えます。step属性でステップを指定する必要があります。（デフォルトが1 なので）例えば 小数点以下第2位まで対象にするなら、stepも 0.01とか 0.05などにしておきます。
• step属性で「step="any"」にすると、小数点以下14位の微細な数まで選びます。
• 負の数値も使えます。マイナス（-）をつけて。
  min属性、max属性 で範囲指定が必要です。（デフォルトが 0 〜100 なので）
• required属性、readonly属性は使えません

全部デフォルト状態のサンプル

min, max, step, value属性を指定していません。
name属性で部品名だけつけています。（コレが無いと送信しても無駄なので）

＊ご感想を選んでください。 商品について：悪い 良い

<form class="sample">
<span>＊ご感想を選んでください。</span>
<label>商品について：悪い <input type="range" name="ex"> 良い</label>
<input type="submit" value="送信">
</form>

デフォルトで min=0, max=100, step=1。valueは真ん中なので この場合「50」です。
何も指定しなくてもこのまま送信できてしまいます。
（required属性が使えない理由はコレか？　指定しても無駄だから）

何が送信されたか知る方法ですが、
サンプルの「送信」ボタンを押すと、このページがリロードされますが、これは <form>要素に action属性が指定されていないため、このページそのものに value（値）が返されたため。
ブラウザのアドレスバーを見ると、末尾に「....html?range=50」と言った具合で、値が表示されています。
詳細は、[47] form要素で「送信先」と「送信方法」を指定しよう をご覧ください。

input type="range" は、ほとんどの PCブラウザ・モバイルブラウザで対応しています。
参考：Can I use | Range input type（Opera Mini は未対応。2017年12月記）

range のスライダーを「縦」にする

W3C の仕様書では、CSSの width、heightプロパティだけで range のスライダーを「縦」にできるとありますが、対応ブラウザはまだ無いみたいです。

下のサンプルは、range に orient="vertical"（Moz用） を追加し、CSS で -webkit-appearance: slider-vertical（WebKit用）などを指定しています。
（参考：html5 - How to display a range input slider vertically - Stack Overflow）
（他に CSSの transform:rotate(90deg) で 90度回転させるアイディアもありました。）

＊商品についてご感想を選んでください（上：良い / 下：悪い）

HTMLはこちら。orient="vertical" は Firefox（Moz）用だそうです。

<input type="range" name="range" orient="vertical">

CSSはこちら。

input[type=range][orient=vertical] {
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 1em;
    height: 160px}

マイナスの値のレンジ、step属性でスライドの制限を

レンジの範囲は マイナスの値でもOK。
デフォルトが 0 〜 100 の範囲なので、min, max属性で範囲を変えれば可能です。

サンプルは、min属性で最小値をマイナス70、max属性を30に、step属性はここでは20にしました。
step属性のおかげで、スライドが 20ずつに制限されます。（スナップする）

また、単純計算だと真ん中は「-20」なのですが、今の ステップで「-20」は選べないので、ステップで選択可能な「-10」が初期値 (value) になっています。

-7030

<label>-70<input type="range" name="ex" min="-70" max="30" step="20">30</label>

小数のレンジを min, max, step属性で作る

小数でレンジを作るのも min, max, step属性を使います。
デフォルトの範囲が 0 〜 100 で ステップが1ずつなので、それらを小数に変えればOK。

サンプルでは、min属性で「-1.25」max属性を「1.05」step属性を「0.05」にしました。そして value属性で、初期値を「-0.5」に指定してみました。

-1.251.05

<label>-1.25<input type="range" name="ex" min="-1.25" max="1.05" step="0.05" value="-0.5">1.05</label>

list属性で レンジの選択肢を作る

list属性と <datalist>要素を併用して、選択肢を作ると、レンジに目盛りが出て、スライドもスナップします。

サンプルではリストを -50、-20、0、15 にしました。step属性は無しに ( = 1に) しました。

-5030

<label>-50<input type="range" name="ex" min="-50" max="30" list="exlist">30</label>
<datalist id="exlist">
  <option value="-50">-50</option>
  <option value="-20">-20</option>
  <option value="0">0</option>
  <option value="15">15</option>
</datalist>

<output>要素に range の結果を出力させる

<output>要素は、計算などの結果の出力欄を作る要素です。
レンジで選択した数値は <input type="range"> だけではハッキリしないので、<output>要素で見えるようにしてみました。

評価（1〜10）：

6

<form class="sample" oninput="op1.value = Number(ex.value);">
  <label>評価（1〜10）： 
  <input type="range" name="ex" min="1" max="10"><output name="op1">6</output></label>
  <input type="submit" value="送信">
</form>

ほかの属性で機能を追加できます

この range も、type属性以外の属性を使って、さらに機能を追加できます。

• autofocus属性で、HTML文書のロード後すぐに「フォーカス（記入のための選択）」する
• form属性で <form>要素の外に出してレイアウトする
• autocomplete属性で「オートコンプリート（履歴から入力予測する）」機能の指定をする
• disabled属性で「使用不可」にする

＊ required属性、readonly属性は使えません。

<input>要素の 索引ページ

<input>要素は「type属性の値」でいろいろなフォームの部品になります。
今回の「レンジ（割合）」の選択の部品以外は、下記の一覧をご覧ください。

• <input>要素の type属性の値一覧

<input>要素は、type属性以外にもたくさんの属性があり、それによってフォーム部品に機能などを加えられます。詳しくは下記の一覧をご覧ください。

• <input>要素の 他の属性一覧

次回予告

次回は、色を選んでもらうための、<input type="color">を使ってみましょう。
これもHTML5からの新しい値です。
対応ブラウザでは カラーピッカーが表示され、ユーザが色を選ぶ事ができる部品です。