SHU BLOG

BLOG NEWS ブログ

TITLE

【HTML】type属性 rangeの使い方、スライダー(数値)を作成しよう!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

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

こんな方に読んでほしい

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

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

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

textとrangeを比較

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

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

ChromeChromeSafariSafariFirefoxFirefoxIEIEEdgeEdge

type=”range”について

type=rangeについて

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

input type=”range”


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

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

value属性あり、なし

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

value属性について


悪い 良い
<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属性とは、数値の最小値を指定します。
max属性とは、数値の最大値を指定します。
step属性とは、指定した値おきに数値を選択できます。

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

min属性、max属性、step属性について


0 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要素を使ってみます。
output要素とは、計算などの結果を出力する要素になります。

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


50
<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を取得し、出力します。

See the Pen
dyOKQvx
by shu (@shu0325)
on CodePen.

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

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)用に指定します。
※上記のコードは分かりやすいように、改行を入れております。

関連記事

type=”text”【HTML】type属性textの使い方、1行のテキスト入力欄を作成しよう!
type=”tel”【HTML】type属性telの使い方、電話番号の入力欄を作成しよう!
type=”email”【HTML】type属性emailの使い方、メールアドレスの入力欄を作成しよう!
type=”url”【HTML】type属性urlの使い方、URLの入力欄を作成しよう!
type=”password”【HTML】type属性passwordの使い方、パスワードの入力欄を作成しよう!
type=”date”【HTML】type属性dateの使い方、日付の入力欄を作成しよう!
type=”week”【HTML】type属性weekの使い方、週の入力欄を作成しよう!
type=”time”【HTML】type属性timeの使い方、時刻の入力欄を作成しよう!
type=”number”【HTML】type属性numberの使い方、数値の入力欄を作成しよう!
type=”color”【HTML】type属性colorの使い方、RGBカラーの入力欄を作成しよう!
type=”checkbox”【HTML】type属性checkboxの使い方、チェックボックスを作成しよう!
type=”radio”【HTML】type属性radioの使い方、ラジオボタンを作成しよう!
type=”file”【HTML】type属性fileの使い方、送信するファイルの選択欄を作成しよう!
type=”submit”【HTML】type属性submitの使い方、フォームの送信ボタンを作成しよう!
type=”reset”【HTML】type属性resetの使い方、入力内容のリセットボタンを作成しよう!

まとめ

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

POINT
  • input type="range"は、 数値(スライダー)を作成します。
  • 対応したブラウザでは、スライダー形式のインターフェースが表示されます。
  • value属性とは、初期値の数値の位置を指定します。
  • min属性とは、数値の最小値を指定します。
  • max属性とは、数値の最大値を指定します。
  • step属性とは、指定した値おきに数値を選択できます。
  • output要素とは、計算などの結果を出力する要素になります。
ChromeChromeSafariSafariFirefoxFirefoxIEIEEdgeEdge
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

page_top