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

最終更新日:2018年01月31日  (初回投稿日:2013年04月09日)

<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 のスライダーを「縦」にできるとありますが、対応ブラウザはまだ無いみたいです。

下のサンプルは、rangeorient="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) になっています。

<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」に指定してみました。

<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に) しました。

<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>要素で見えるようにしてみました。

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

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.