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

HTML DOM Input Rangeのvalueプロパティとは？使い方とサンプルコードを解説

HTML DOMのInput Range valueプロパティは、type="range"が指定されたinput要素に関連するプロパティです。スライダー（レンジ）コントロールのvalue属性の値を取得したり、新しい値を設定したりするために使用されます。value属性には初期値（デフォルト値）や、ユーザーがスライダーをドラッグして設定した値が格納されます。

構文

valueプロパティの構文は以下の通りです。

値を設定する場合

rangeObject.value = text;

ここで「text」には、レンジスライダーコントロールに設定したい値を指定します。

サンプルコード

それでは、Input Rangeのvalueプロパティを使った具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Input range Value property</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>下のボタンをクリックすると、上記要素の値を取得できます</p>
<button onclick="getValue()">Get Value</button>
<p id="Sample"></p>
<script>
    function getValue() {
        var t = document.getElementById("RANGE1").value;
        document.getElementById("Sample").innerHTML = "The value for the radio button is : "+t;
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、次のような画面が表示されます。

HTML DOM Input Rangeのvalueプロパティとは？使い方とサンプルコードを解説

「Get Value」ボタンをクリックすると、以下のようにスライダーの現在の値が出力されます。

HTML DOM Input Rangeのvalueプロパティとは？使い方とサンプルコードを解説

コードの解説

上記のサンプルコードでは、以下のような処理を行っています。

まず、フォームの中にtype="range"、id="RANGE1"、name="VOL"を指定した入力フィールドを作成しています。

<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
<form>

次に、クリックされるとgetValue()メソッドを実行する「Get Value」ボタンを作成します。

<button type="button" onclick="getValue()">Get Value</button>

getValue()メソッドでは、getElementById()メソッドを使ってinput要素を取得し、その「value」属性の値を変数tに代入しています。その後、innerHTMLプロパティを使用して、idが「Sample」の段落要素に変数tの内容を表示しています。

function getValue() {
    var t = document.getElementById(“RANGE1").value;
    document.getElementById("Sample").innerHTML = "The value for the input field is : "+t;
}

このように、valueプロパティを活用することで、JavaScriptからスライダーの現在値を簡単に読み取ったり、プログラム側から値を変更したりすることが可能になります。音量調整や評価入力など、数値を直感的に選択させたいUIを実装する際に非常に便利なプロパティです。

  1. HTML DOM入力レンジ（range）のdisabledプロパティの使い方を徹底解説

    HTML DOM Input Range disabledプロパティとはHTML DOMのInput Range（レンジスライダー）におけるdisabledプロパティは、スライダーを無効化するかどうかを設定または取得するために使用されるプロパティです。このプロパティにはブール値（真偽値）を指定します。trueを設定するとスライダーは無効化され、falseを設定すると有効になります。デフォルト値はfalseです。なお、無効化された要素はグレーアウトして表示され、ユーザーはクリックやドラッグなどの操作を行うことができなくなります。構文（Syntax）disabledプロパティを設定する場合の構文は

  2. HTML DOM 入力レンジ（range）の autofocus プロパティの使い方を徹底解説

    HTML DOM の input range autofocus プロパティは、HTML の <input> 要素が持つ autofocus 属性に関連付けられたプロパティです。このプロパティを使うことで、ページが読み込まれた際にレンジスライダー（type=range の入力欄）へ自動的にフォーカスを当てるかどうかを、設定（set）および取得（get）することができます。 構文（Syntax） autofocus プロパティの基本的な構文は以下のとおりです。 autofocus プロパティを設定する場合： rangeObject.autofocus = true|false tru