戻る

スライダー

スライダーのmin/max/valueの値変更

min:10 max:50 value:25
min:0 max:100 value:50
minに変更
maxに変更


[小数点のスライダー]

<button id="b1">min:10 max:50 value:25</button><br> <button id="b2">min:0 max:100 value:50</button><br> <button id="b3">minに変更</button><br> <button id="b4">maxに変更</button><br> <br> <input type="range" id="slider" min="0" max="100" value="50"> <div id="sliderValue"></div> <br> [小数点のスライダー]<br> <input type="range" id="sliderDecimal" min="0" max="100" value="50"> <div id="sliderValueDecimal"></div>
copy

const slider = document.getElementById("slider");
const sliderValue = document.getElementById("sliderValue");
let flg=0;
slider.addEventListener("input", function() {
	sliderChange();
});
function sliderChange()
{
	const value = slider.value;
	sliderValue.textContent = value;
}
const b1 = document.getElementById("b1");
b1.addEventListener("click", () => 
{
	slider.min=0;
	slider.max=50;
	slider.value=25;
	sliderChange();
	flg = 0;
});
const b2 = document.getElementById("b2");
b2.addEventListener("click", () => 
{
	slider.min=0;
	slider.max=100;
	slider.value=50;
	sliderChange();
	flg = 1;
});
const b3 = document.getElementById("b3");
b3.addEventListener("click", () => 
{
	slider.value=0;
	sliderChange();
});
const b4 = document.getElementById("b4");
b4.addEventListener("click", () => 
{
	slider.value = flg == 0 ? 50 : 100;
	sliderChange();
});
sliderChange();

const sliderDecimal = document.getElementById("sliderDecimal");
const sliderValueDecimal = document.getElementById("sliderValueDecimal");
sliderDecimal.addEventListener("input", function() {
	sliderDecimalChange();
});
function sliderDecimalChange()
{
  const value = sliderDecimal.value;
  const normalizedValue = value / 100; // スライダーの値は0-100の範囲なので100で割って正規化
  sliderValueDecimal.textContent = normalizedValue.toFixed(2); // 小数点以下2桁で表示
}
sliderDecimalChange();

スライダーを実装するには、HTMLでinput type="range"要素を作成し、JavaScriptで値を取得・処理します。

min	最小値を設定
max	最大値を設定
value	現在値を設定

flg変数は下記にしています。
0:最大値:50
1:最大値:100
3項演算子で最大値を設定します。

小数点以下2桁で表示します。


戻る

back

slider

Change the min/max/value of the slider

min:10 max:50 value:25
min:0 max:100 value:50
Change to min
Change to max


[Decimal slider]

<button id="b1">min:10 max:50 value:25</button><br> <button id="b2">min:0 max:100 value:50</button><br> <button id="b3">Change to min</button><br> <button id="b4">Change to max</button><br> <br> <input type="range" id="slider" min="0" max="100" value="50"> <div id="sliderValue"></div> <br> [Decimal slider]<br> <input type="range" id="sliderDecimal" min="0" max="100" value="50"> <div id="sliderValueDecimal"></div>
copy

const slider = document.getElementById("slider");
const sliderValue = document.getElementById("sliderValue");
let flg=0;
slider.addEventListener("input", function() {
	sliderChange();
});
function sliderChange()
{
	const value = slider.value;
	sliderValue.textContent = value;
}
const b1 = document.getElementById("b1");
b1.addEventListener("click", () => 
{
	slider.min=0;
	slider.max=50;
	slider.value=25;
	sliderChange();
	flg = 0;
});
const b2 = document.getElementById("b2");
b2.addEventListener("click", () => 
{
	slider.min=0;
	slider.max=100;
	slider.value=50;
	sliderChange();
	flg = 1;
});
const b3 = document.getElementById("b3");
b3.addEventListener("click", () => 
{
	slider.value=0;
	sliderChange();
});
const b4 = document.getElementById("b4");
b4.addEventListener("click", () => 
{
	slider.value = flg == 0 ? 50 : 100;
	sliderChange();
});
sliderChange();

const sliderDecimal = document.getElementById("sliderDecimal");
const sliderValueDecimal = document.getElementById("sliderValueDecimal");
sliderDecimal.addEventListener("input", function() {
	sliderDecimalChange();
});
function sliderDecimalChange()
{
  const value = sliderDecimal.value;
  const normalizedValue = value / 100; // The slider value ranges from 0 to 100, so normalize it by dividing by 100.
  sliderValueDecimal.textContent = normalizedValue.toFixed(2); // Displayed with two decimal places
}
sliderDecimalChange();

To implement a slider, create an input type="range" element in HTML and retrieve and process the value using JavaScript.

min	Set the minimum value
max	Set the maximum value
value	Set the current value

The flg variable is set as follows.
0: Maximum value: 50
1: Maximum value: 100
Set the maximum value using a ternary operator.

Displayed with two decimal places.


back