音量や明るさの調整で見かける「つまみを左右にドラッグして数値を決めるバー」は、<input type="range"> で作れるスライダーです。数値を直接入力させるより直感的に操作でき、決まった範囲の中から値を選ばせたいときに向いています。この記事では、範囲を決める min・max、刻み幅の step、初期値の value といった基本属性から、JavaScript で現在値を取得して画面に表示する方法、よくあるつまずきまで、初心者の方にも分かるように解説します。
目次
range スライダーの基本
スライダーは input 要素の type に range を指定するだけで作れます。何も属性を付けないと、0 から 100 の範囲で、つまみは中央（50）から始まります。
<!-- 既定では min=0 max=100 step=1 -->
<input type="range" name="volume">下の例は、音量を 0〜100 で選ぶスライダーです。つまみを動かすと、その値がリアルタイムで上の表示に反映されます（値の表示には後述の JavaScript を使っています）。CSS や属性を書き換えて、動きを確かめてみてください。
<label for="volume">音量: <output id="out">50</output></label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50" step="1">
label {
display: block;
margin-bottom: 8px;
font-family: sans-serif;
font-size: 15px;
}
output {
font-weight: bold;
color: #2196f3;
}
input[type="range"] {
width: 100%;
max-width: 320px;
}
const slider = document.getElementById("volume");
const out = document.getElementById("out");
// スライダーを動かすたびに現在値を表示する
slider.addEventListener("input", () => {
out.textContent = slider.value;
});
min・max・step・value で範囲と刻みを決める
スライダーの挙動は、4つの属性で調整します。扱いたい数値の範囲や、どれくらい細かく動かせるかを指定できます。
| 属性 | 意味 | 既定値 |
|---|---|---|
min | 選べる最小値（つまみが左端のとき） | 0 |
max | 選べる最大値（つまみが右端のとき） | 100 |
step | 1回に動かせる刻み幅 | 1 |
value | 最初のつまみの位置（初期値） | min と max の中間 |
<!-- 1.0〜5.0 を 0.5 刻みで、初期値 3.0 -->
<input type="range" name="rating"
min="1" max="5" step="0.5" value="3">step は整数だけでなく 0.5 のような小数も指定できます。step="0.5" なら、つまみは 1.0・1.5・2.0…と動きます。step="any" にすると刻みの制限がなくなり、連続的な値を選べるようになります。価格帯や評価のように「区切りのよい数値だけ選ばせたい」ときは step を、なめらかに調整させたいときは any を使うとよいでしょう。
JavaScript で現在値を取得して表示する
スライダーは、つまみを動かしている最中は数値が画面に出ません。そのため、現在いくつなのかを別の場所に表示するのが一般的です。値は input 要素の value プロパティで取得でき、操作のたびに発生する input イベントで更新します。
const slider = document.getElementById("volume");
const out = document.getElementById("out");
// つまみを動かすたびに値を表示に反映する
slider.addEventListener("input", () => {
out.textContent = slider.value; // 値は常に文字列
});ポイントは2つです。1つは、ドラッグ中も連続して反応させたいので change ではなく input イベントを使うこと。change は操作が終わった瞬間にしか発火しないため、つまみの動きに合わせた表示にはなりません。もう1つは、slider.value が文字列で返ることです。計算に使うときは Number(slider.value) などで数値に変換してください。表示に output 要素を使うと、「計算結果や入力値を表す」という意味づけにもなり、おすすめです。
label と結び付けてアクセシブルにする
スライダーが「何の値」を調整するものかを伝えるため、label と結び付けます。for 属性と input の id を一致させるのが基本です。数値の範囲が見た目だけでは伝わりにくいときは、min と max の値をラベルやその近くに添えておくと親切です。
<label for="bright">明るさ</label>
<input type="range" id="bright" name="bright"
min="0" max="100" value="80">思いどおりに動かないとき
つまみが端から動かせないとき
value に min〜max の範囲外の値を指定すると、ブラウザが自動的に範囲内へ補正します。また step と合わない初期値（例: step="10" なのに value="5"）を与えると、最も近い有効な値に丸められます。意図した初期位置にならないときは、value が範囲内かつ step の刻みに合っているかを確認してください。
値が更新されないとき
表示が変わらないときは、change イベントを使っていないか確認しましょう。ドラッグ中の変化を拾うには input イベントが必要です。また、取得先の要素を getElementById で正しく取得できているか、id のつづりも見直してください。
計算結果がおかしいとき
slider.value は文字列なので、そのまま + で足すと文字列の連結になってしまいます（"50" + 10 が "5010" になるなど）。数値として計算するときは Number() や parseInt() で変換してから使ってください。
まとめ
<input type="range"> は、範囲のある数値を直感的に選ばせるのに便利な入力部品です。要点を整理します。
min・maxで範囲、stepで刻み幅、valueで初期値を決める。step="any"で連続的な値も選べる。- 現在値は
valueプロパティで取得し、inputイベントで更新する。 valueは文字列なので、計算時はNumber()で数値に変換する。label（と必要ならoutput）を組み合わせて、何の値か・今いくつかを伝える。
まずは min・max・value を指定したスライダーを置き、input イベントで値を表示するところから始めると、仕組みがつかめます。