HTML5の入力型rangeで値を表示する: 他の方法

2024-09-13

HTML5の入力型rangeで値を表示する

HTML5の入力型rangeは、ユーザーがスライダーを使って数値を選択できる入力フィールドを提供します。この値をリアルタイムで表示するには、HTML、CSS、JavaScriptの組み合わせを使用します。

HTMLコード

<input type="range" id="myRange" min="1" max="100" value="50">
<p>範囲値: <span id="demo"></span></p>

type="range": 入力フィールドがrange型であることを指定します。
id="myRange": 入力フィールドにIDを割り当てます。
min="1": 値の最小値を設定します。
value="50": 初期値を設定します。
<span id="demo"></span>: 範囲値を表示するための要素です。

CSSコード (オプション)

#myRange {
  width: 100%;
}

スライダーの幅を調整します。

JavaScriptコード

var range = document.getElementById("myRange");
var output = document.getElementById("demo");

output.innerHTML = range.value;

range.oninput = function() {
  output.innerHTML = this.value;
}

innerHTML: 要素のHTMLコンテンツを設定します。
oninput イベント: スライダーの値が変更されたときに実行されるイベントです。

解説

JavaScriptで、IDに基づいて入力フィールドと表示要素を取得します。
初期値を表示します。
oninput イベントハンドラーを登録します。
スライダーの値が変更されると、イベントハンドラーが実行され、新しい値を表示要素に設定されます。

<input type="range" id="myRange" min="1" max="100" value="50">
<p>範囲値: <span id="demo"></span></p>

#myRange {
  width: 100%;
}

var range = document.getElementById("myRange");
var output = document.getElementById("demo");

output.innerHTML = range.value;

range.oninput = function() {
  output.innerHTML = this.value;
}

HTMLのdata属性を使用する

<input type="range" id="myRange" min="1" max="100" value="50" data-output="demo">
<p>範囲値: <span id="demo"></span></p>

var range = document.getElementById("myRange");
var output = document.getElementById(range.dataset.output);

output.innerHTML = range.value;

range.oninput = function() {
  output.innerHTML = this.value;
}

data-output 属性: 表示要素のIDを指定します。
JavaScriptで、dataset プロパティを使用して属性値を取得します。

JavaScriptのaddEventListenerを使用する

<input type="range" id="myRange" min="1" max="100" value="50">
<p>範囲値: <span id="demo"></span></p>

var range = document.getElementById("myRange");
var output = document.getElementById("demo");

output.innerHTML = range.value;

range.addEventListener("input", function() {
  output.innerHTML = this.value;
});

addEventListener メソッド: イベントリスナーを登録します。

jQueryを使用する

<input type="range" id="myRange" min="1" max="100" value="50">
<p>範囲値: <span id="demo"></span></p>

$(document).ready(function() {
  $("#myRange").on("input", function() {
    $("#demo").text($(this).val());
  });
});

jQueryのセレクターとイベントハンドラーを使用します。

テンプレートエンジンを使用する

<template id="range-template">
  <p>範囲値: <span>{{ value }}</span></p>
</template>

var range = document.getElementById("myRange");
var template = document.getElementById("range-template").content;
var output = document.querySelector("#demo");

output.appendChild(template.cloneNode(true));

range.oninput = function() {
  output.querySelector("span").textContent = this.value;
}