「体力ゲージ」「音量バー」「明るさ調整」など、スライダーを使った値の操作はinputを使うと簡単に実装できます。
もちろんライブラリを使っても良いですが、JavaScriptについて深く理解していないとカスタマイズできないこともあり、一番シンプルなスライダーの作り方を紹介します。
また動画もあるので必要に応じて使ってください。
inputタグを使ってスライダーを作る方法
結論、inputのtype属性を「range」とするだけです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div>
<input type="range" id="inputSlider" min="0" max="100" value="50" />
</div>
</body>
</html>
inputでスライダーが作れるのをご存知ない方は多いのではないでしょうか。
とても簡単なので覚えておくことをお勧めします。
inputには色んな属性があり、上記で使用した属性はそれぞれスライダーの設定になっています。
・min : 最小の値（今回は0）
・max : 最大の値（今回は100）
・value : 最初に表示する値（今回は50）
valueについてはJavaScriptで操作してゲージを変更することができます。
const inputSlider = document.querySelector("#inputSlider");
const inputSliderResult = document.querySelector("#inputSliderResult");
// valueを70に変更
inputSlider.value = 70;
inputを取得してvalueとするとvalue属性にアクセスすることができます。
変更したい値を設定するとHTML側で指定したvalueの値を変更することができます。
とはいえ現状だと目分量でしか変化が分からないので、文字で値を表示するようにしてみたいと思います。
まずHTMLで文字を出力するためのpタグを追加しておきましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div>
<input type="range" id="inputSlider" min="0" max="100" value="50" />
</div>
<!--ここを追加-->
<div>
<p id="inputSliderResult"></p>
</div>
</body>
</html>続いてJavaScriptは以下のように追加してください。
const inputSlider = document.querySelector("#inputSlider");
const inputSliderResult = document.querySelector("#inputSliderResult");
// ここを追加
inputSlider.addEventListener("input", (e) => {
const value = e.target.value;
inputSliderResult.innerHTML = value;
});inputのvalueで値が変更できると説明しましたが、ユーザーが指定した値を取得するには「e.target.value」とすれば取得できます。
あとはaddEventListenerのinputイベントで「ユーザーがスライダーを操作した時」とすればOKです。
操作したゲージの位置によって値が変更され出力されているのが分かります。
ちなみにですがaddEventListenerにはchangeイベントというイベントもあり、changeイベントだと若干動きが変わります。
const inputSlider = document.querySelector("#inputSlider");
const inputSliderResult = document.querySelector("#inputSliderResult");
// ここを修正
inputSlider.addEventListener("change", (e) => {
const value = e.target.value;
inputSliderResult.innerHTML = value;
});先ほどと違ってスライダーを離した時に数値が出力されています。
結果は同じなのですが動き方が変わりましたね。
inputイベントは操作中に値を取得するのですが、changeイベントは操作が止まった時に値を取得します。
どちらのイベントも使い所があるので覚えておきましょう。
またinputタグの詳しい解説はこちらの記事でもまとめているので併せてどうぞ。