HTML DOMのInput Range（入力レンジ）オブジェクトとは？プロパティ・メソッド・サンプルコードを徹底解説

HTML DOMのInput Rangeオブジェクトは、<input>要素のうちtype="range"（スライダー形式の範囲指定コントロール）に関連付けられたオブジェクトです。JavaScriptを使えば、新しいレンジ入力欄を動的に作成したり、既存の要素にアクセスして値や属性を操作したりできます。作成にはcreateElement()メソッドを、アクセスにはgetElementById()メソッドをそれぞれ使用します。

Input Rangeオブジェクトの主なプロパティ

Input Rangeオブジェクトには、以下のようなプロパティが用意されています。

No.	プロパティと説明
1	autocomplete レンジコントロールのautocomplete属性の値を設定または取得します。
2	autofocus ページ読み込み時に、スライダーコントロールへ自動的にフォーカスを当てるかどうかを設定または取得します。
3	defaultValue スライダーコントロールの初期値（デフォルト値）を設定または取得します。
4	disabled スライダーコントロールが無効化されているかどうかを設定または取得します。
5	form スライダーコントロールを含むフォームへの参照を返します。
6	list スライダーコントロールに関連付けられたdatalistへの参照を返します。
7	max スライダーコントロールのmax属性（最大値）の値を設定または取得します。
8	min スライダーコントロールのmin属性（最小値）の値を設定または取得します。
9	name スライダーコントロールのname属性の値を設定または取得します。
10	step スライダーコントロールのstep属性（増減の刻み幅）の値を設定または取得します。
11	type スライダーコントロールのフォーム要素の種類を返します。
12	value スライダーコントロールのvalue属性（現在の値）を設定または取得します。

Input Rangeオブジェクトのメソッド

Input Rangeオブジェクトには、次の2つのメソッドが用意されています。

No.	メソッドと説明
1	stepDown() スライダーコントロールの値を、指定した数だけ減少させます。
2	stepUp() スライダーコントロールの値を、指定した数だけ増加させます。

サンプルコード：レンジ入力欄を動的に作成する

それでは、Input Rangeオブジェクトの具体的な使用例を見ていきましょう。ボタンをクリックすると、type="range"の入力欄がページに追加されるシンプルな例です。

<!DOCTYPE html>
<html>
<head>
<script>
    function rangeCreate() {
        var R = document.createElement("INPUT");
        R.setAttribute("type", "range");
        document.body.appendChild(R);
}
</script>
</head>
<body>
<h1>Input range object</h1>
<p>下のボタンをクリックすると、type="range"の入力フィールドが作成されます</p>
<button onclick="rangeCreate()">CREATE</button>
<br><br>
VOLUME:
</body>
</html>

実行結果

このコードを実行すると、まず「VOLUME:」というラベルとCREATEボタンだけが表示された画面になります。

HTML DOMのInput Range（入力レンジ）オブジェクトとは？プロパティ・メソッド・サンプルコードを徹底解説

CREATEボタンをクリックすると、その下にスライダー型のレンジ入力欄が表示されます。

HTML DOMのInput Range（入力レンジ）オブジェクトとは？プロパティ・メソッド・サンプルコードを徹底解説

コードの解説

この例では、ユーザーがクリックするとrangeCreate()メソッドが実行されるCREATEボタンを作成しています。

<button onclick="rangeCreate()">CREATE</button>

rangeCreate()メソッド内部では、documentオブジェクトのcreateElement()メソッドに"INPUT"を引数として渡し、<input>要素を新規作成しています。作成されたinput要素は変数Rに格納され、続いてsetAttribute()メソッドによって、値が"range"であるtype属性が設定されます。

なお、setAttribute()は、指定した属性がまだ存在しない場合に、その属性を新たに作成して値を割り当てる働きをする点に注意してください。最後に、documentのbodyに対してappendChild()メソッドを呼び出し、type="range"のinput要素をbodyの子ノードとして追加しています。

function rangeCreate() {
    var R = document.createElement("INPUT");
    R.setAttribute("type", "range");
    document.body.appendChild(R);
}

このように、DOM操作を組み合わせることで、ページを読み込んだ後でも自由にレンジスライダーを生成・制御できます。音量調整や評価入力など、直感的な数値選択UIが必要な場面でぜひ活用してみてください。

HTML DOM 入力範囲（Range）の step プロパティとは？使い方を解説

HTML DOM Input Rangeのnameプロパティとは？設定方法と実例付きで解説

HTML DOM 入力パスワード（Input Password）オブジェクトとは？使い方を解説
HTML DOM 入力パスワードオブジェクトとはHTML DOM の入力パスワード（Input Password）オブジェクトは、type属性に「password」が指定された <input> 要素に関連付けられたオブジェクトです。パスワード入力欄として表示されるこの要素は、文字が「●」や「＊」などでマスクされ、第三者から入力内容が見えないようになっています。JavaScript を使ってパスワード入力要素を操作するには、新規に作成する場合は createElement() メソッド、既存の要素へアクセスする場合は getElementById() メソッドを使用します。Input
HTML DOMのInput Range（入力レンジ）オブジェクトとは？プロパティ・メソッド・サンプルコードを徹底解説
HTML DOMのInput Rangeオブジェクトは、<input>要素のうちtype=range（スライダー形式の範囲指定コントロール）に関連付けられたオブジェクトです。JavaScriptを使えば、新しいレンジ入力欄を動的に作成したり、既存の要素にアクセスして値や属性を操作したりできます。作成にはcreateElement()メソッドを、アクセスにはgetElementById()メソッドをそれぞれ使用します。 Input Rangeオブジェクトの主なプロパティ Input Rangeオブジェクトには、以下のようなプロパティが用意されています。 No.プロパティと説明