今回は【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)用に指定します。
※上記のコードは分かりやすいように、改行を入れております。
関連記事
まとめ
今回はこれで以上です。
次回も「フォーム」について解説していきます。
- POINT
-
input type="range"
は、 数値(スライダー)を作成します。 - 対応したブラウザでは、スライダー形式のインターフェースが表示されます。
- value属性とは、初期値の数値の位置を指定します。
- min属性とは、数値の最小値を指定します。
- max属性とは、数値の最大値を指定します。
- step属性とは、指定した値おきに数値を選択できます。
- output要素とは、計算などの結果を出力する要素になります。
Chrome | Safari | Firefox | IE | Edge |
---|
| | | | |
スポンサーリンク
SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事