HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのrange入力タイプの使い方を解説！スライダーで数値範囲を入力する方法

HTMLの <input type="range"> は、一定の範囲内から値を選択できる入力欄を作成するための要素です。ユーザーにはスライダー（つまみをドラッグするバー）として表示され、マウスやタッチ操作で直感的に数値を指定できます。

range入力タイプの基本

range型では、選択できる数値に制限を設けることができます。制限を指定するには、以下のような属性を使用します。

  • min：選択可能な最小値を指定します。
  • max：選択可能な最大値を指定します。
  • step：値が変化する間隔（刻み幅）を指定します。例えば「step="5"」とすると、0・5・10…のように5刻みで選択されます。

これらの属性を省略した場合、デフォルトの範囲は0〜100、stepは1になります。また、初期値を設定したい場合は value 属性を使います。

サンプルコード

以下のコードを実行すると、HTMLでrange入力タイプを使う方法を確認できます。画面上にはスライダーとして表示されます。

<!DOCTYPE html>
<html>
<head>
<title>HTML input range</title>
</head>
<body>
<form action = "" method = "get">
ソフトウェアのインストールがどこまで進んだか教えてください：<br><br>
<input type = "range" name = "point" min = "0" max = "50"><br>
<input type = "submit" value = "送信">
</form>
</body>
</html>

step属性を使った応用例

値を10刻みにしたい場合は、次のようにstep属性を追加します。

<input type = "range" name = "volume" min = "0" max = "100" step = "10" value = "50">

この例では、0〜100の範囲を10刻みで選択でき、初期値は50に設定されます。音量調整や評価スコアなど、段階的な値を選ばせたい場面で便利です。

まとめ

range入力タイプは、min・max・stepなどの属性と組み合わせることで、柔軟に数値範囲の入力を受け付けられる便利なフォーム部品です。すべての主要ブラウザでサポートされているため、アンケートや設定画面などで幅広く活用できます。

  1. HTMLの1つのrange入力で異なるstep属性を使い分ける方法

    HTMLのinput要素におけるstep属性は、入力できる数値の間隔（刻み幅）を定義するための属性です。たとえば「0、2、4、6、8、10」のように、一定間隔で数値が増減する仕組みを作れます。また、min属性やmax属性と組み合わせることで、有効な値の範囲を柔軟に設定することも可能です。 本記事では、まずstep属性の基本的な使い方を確認したうえで、1つのrange入力の中で条件に応じて異なるstep属性を動的に切り替える方法を、JavaScript（jQuery）を使った実装例とともに解説します。 step属性の基本的な使い方 次のコードは、step属性を使って数値の刻みを作成するシンプルな

  2. HTML DOM Input Range typeプロパティの使い方を徹底解説

    HTML DOM Input Range typeプロパティとはHTML DOMのInput Range typeプロパティは、type=rangeが指定されたinput要素に関連付けられたプロパティです。range型の入力フィールドに対してこのプロパティを参照すると、常に文字列「range」を返します。range型はスライダー形式の入力コントロールを表す要素であり、音量調整や評価値の選択などでよく使われます。JavaScript側で要素の種類を動的に確認したい場合に、このtypeプロパティが役立ちます。構文range typeプロパティの構文は以下の通りです。rangeObject.type