HTML

Specify type="range" in the type attribute of the input element in HyperText Markup Language.

HTML's <input type="range"> defines a control for enterring a number whose exact value is not important (like a slider control).

<input type="range">

　input要素の type属性で type="range" を指定すると、スライダーを表示する入力フィールドが作成されます。

　以下は、type="range" を指定した input要素の使用例です。


<label for="volume">音量：</label>
<input type="range" id="volume" min="0" max="100" value="50">

　上記の例では、id属性が volume、最小値が 0、最大値が 100、初期値が 50 のスライダーを作成しています。

　スライダーは、ユーザーが最小値から最大値までの範囲内で値を選択できるようになっています。スライダーを動かすと、その値は input要素の value属性に反映されます。また、スライダーには、JavaScriptを使用して値を変更するためのイベントも追加できます。

　type="range"を使用することで、ユーザーが数値を入力することなく、直感的に値を選択できる入力フィールドを作成することができます。ユーザーに正確な数値を入力してもらいたい場合には、type属性の値に type="number" を指定してください。

+JavaScript

　JavaScriptを使って、スライダーを動かすと、数値がテキスト表示されるようにしてみました。

スライダーの値：

HTML source


<p>スライダーの値： <span id="value-text"></span></p>
<label for="volume2">音量：</label>
<input type="range" id="volume2" min="0" max="100" value="50">

JavaScrpt source


const slider = document.getElementById("volume2");
const valueText = document.getElementById("value-text");

// スライダーの値が変更された時に実行する関数
slider.addEventListener("input", function() {
	valueText.textContent = slider.value;
});

+JavaScript +CSS

　スライダーを動かすと、CSSで描画した丸が動きます。これによりスライダーの値がグラフィカルに表現され、より直感的に理解できるようになります。

スライダーの値：

HTML source


<div class="value-indicator" id="value-indicator"></div>
<p>スライダーの値： <span id="value-text2"></span></p>
<label for="volume3">音量：</label>
<input type="range" id="volume3" min="0" max="100" value="0" class="slider">

JavaScript source


const slider2 = document.getElementById("volume3");
const valueText2 = document.getElementById("value-text2");
const valueIndicator = document.getElementById("value-indicator");

// スライダーの値が変更された時に実行する関数
slider2.addEventListener("input", function() {
	valueText2.textContent = slider2.value;
	
	const value = slider2.value / 100;
	valueIndicator.style.setProperty("--value", value)
});

CSS source


.value-indicator {
	margin-top: 10px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #4285f4;
	position: relative;
	left: calc((100% - 50%) * var(--value));
	transition: left 0.2s ease-in-out;
}