シュウ

今回は【HTML】type属性 rangeの使い方、スライダー(数値)を作成しよう!
の解説になります！

こんな方に読んでほしい

• HTMLを学び始めた方へ
• HTMLについて学びたい方へ
• 今回はinput type=”range”(レンジ)について解説しております。

今回は、input type="range"(レンジ)について詳しく解説していきます。
type=”range”では、「数値」のスライダーを作成します。

input type="range"で作成すると、数値のスライダーの入力欄が作成されます。

左の図が、input type="text"になり、通常の入力欄になります。
右の図が、input type="range"になり、数値(スライダー)の入力欄になります。

注意！
※今回は、「Chrome」でのブラウザ表示を載せています、ブラウザによっては見え方が異なるのでご注意ください。

Chrome	Safari	Firefox	IE	Edge

type=”range”について

input type="range"を指定すると、数値(スライダー)になります。
対応したブラウザでは、スライダー形式のインターフェースが表示されます。
書き方は以下のようになります。

<form method="post">
	<div>
		<label for="range-example">現在の数値</label>
		<input type="range" name="range-example" />
	</div>
</form>

value属性(入力欄に初期値)について

value属性とは、スライダーの初期値を指定します。規定値は100です。
また、type属性が「submit」、「image」、「reset」、「button」の場合はボタン名として表示されます。
例)value="10"と指定すると、10が値の初期値になります。
※valueを指定しない場合の初期値は、value="50"(50)の真ん中になります。

<form method="post">
	<div>
		<label for="range-example">・セミナーについて</label>
		悪い <input type="range" name="range-example" value="10" /> 良い
	</div>
</form>

min属性とmax属性(スライダーの選択範囲)、step属性(スライダーを制限)について

min属性とは、数値の最小値を指定します。
max属性とは、数値の最大値を指定します。
step属性とは、指定した値おきに数値を選択できます。

min属性=「0」、max属性=「100」に指定することで、0〜100の範囲のスライダーになります。
また、step属性=「10」を指定することで、10単位、「10、20、30…100」のように数値が変わります。

<form method="post">
	<div>
		<label for="range-example">・評価</label>
		0 <input type="range" name="range-example" 
		min="0" max="100" step="10" /> 100
	</div>
</form>

※上記のコードは分かりやすいように、改行を入れております。

output要素(出力結果)について

今回は属性ではなく、output要素を使ってみます。
output要素とは、計算などの結果を出力する要素になります。

<form method="post">
	<div>
		<label for="range-example">・評価(0〜100)</label>
		<input type="range" name="example" min="0" max="100" step="10" />
		<output name="op1">50</output>
	</div>
</form>

output {
    background: #f9f9f9;
    border: solid 1px #ccc;
    display: inline-block;
    padding: 0.2em 1em;
    margin: 0 0 0 10px;
}

※上記のコードは分かりやすいように、改行を入れております。

javascriptで値を出力について

今回は、javascriptを使い、値を出力しております。
HTMLのinput要素にid="range"を指定します。
etElementById("range")で、input要素(#range)を取得します。
最後に、evaを取得し、出力します。

CSSでinput type=”range”を整える

今回はCSSの「属性セレクタ」を使い整えていきます。
書き方は以下のようになります

input[type="range"] {
  /*--type="range"のinput要素にのみ適用されます--*/
}

縦のスライダーを実装

初期は、横のスライダーですが、CSSを指定することにより、縦スライダーも可能になります。
また、ブラウザによって異なるのでご注意ください。

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

<form method="post">
	<div>
		<label for="range-example">・評価(上：良い / 下：悪い)</label>
		<input type="range" name="example" min="0" max="100" 
		step="10" orient="vertical"/>
	</div>
</form>

input[type="range"] {
    writing-mode: bt-lr; /* IE, Edge */
    -webkit-appearance: slider-vertical; /* Chrome, Opera, Safari */
    width: 1em;
    height: 100px
}

orient="vertical"は、Firefox（Moz）用に指定します。
※上記のコードは分かりやすいように、改行を入れております。

関連記事

まとめ

今回はこれで以上です。
次回も「フォーム」について解説していきます。

Chrome	Safari	Firefox	IE	Edge

最新記事

• 

  【HTML】download属性について、ファイルのダウンロードを学ぼう!

  2021.07.27

• 

  【HTML】ruby要素の使い方、テキストにルビ(ふりがな)を振ろう!

  2021.07.09

• 

  【HTML】kbd要素の使い方、キーボードのキーを表す要素!

  2021.07.06

• 

  【HTML】hr要素の使い方、段落の区切りを示す要素!

  2021.07.02

関連記事

< 前の記事

【HTML】type属性numberの使い方、数値の入力欄を作成しよう!

次の記事 >

【HTML】type属性colorの使い方、RGBカラーの入力欄を作成しよう!