ウェブサイトでユーザーが数値を入力できる UI として、スライダーはとても便利です。特に、数値の範囲を視覚的に選択させたい場合に適しています。

今回は、HTMLで数値入力のスライダーを設置する方法と、JavaScriptでその値を取得する方法について解説します。

HTML で数値入力のスライダーを設置する方法

HTML でスライダーを設置するには、<input>タグのtype属性をrangeに設定します。

<input type="range" id="slider">

何もオプションを指定しないデフォルトの状態では、0 から 100 までを 1 刻みで入力できる、初期値が 50 のスライダーが表示されます。

スライダーに設定できるオプション属性

  • min: 最小値を指定
  • max: 最大値を指定
  • value: 初期値を設定
  • step: 値の移動幅を指定

例えば、10刻みで 0 から 150 までの値を選択できる初期値 0 のスライダーを設置するには、以下のように記述します。

<input type="range" id="slider" min="0" max="150" step="10" value="0">

スライダーに目盛を追加

<datalist>で目盛を定義し、スライダーのlist属性で<datalist>のidを指定すると、スライダーにメモリを追加することができます。

<input type="range" id="slider" min="0" max="100" value="50" list="sliderMarkers">
<datalist id="sliderMarkers">
  <option value="0"></option>
  <option value="25"></option>
  <option value="50"></option>
  <option value="75"></option>
  <option value="100"></option>
</datalist>

JavaScriptでスライダーの値を取得する方法

JavaScript を使ってスライダーの値を取得するには、スライダーの要素を取得し、valueプロパティを利用します。

const slider = document.getElementById("slider");
console.log(slider.value);

このコードを実行すると、スライダーの現在の値がコンソールに表示されます。

スライダーの値が変更された時のイベント

スライダーの値が変更された時のイベントには、スライダーを動かし終わった時に発火するchangeイベントと、スライダーを動かすたびに発火するinputイベントの 2 種類があります。

const slider = document.getElementById("slider");

slider.addEventListener("change", function() {
  console.log(slider.value); // 動かし終わった時にコンソールに値が出力される
});

slider.addEventListener("input", function() {
  console.log(slider.value); // 動かすたびにリアルタイムでコンソールに値が出力される
});

下のサンプルでは、changeイベントを使用した時とinputイベントを使用した時のタイミングの違いを確認することができます。

See the Pen Range Input Sample 01 by YUTSUZO (@YUTSUZO) on CodePen.

終わりに

スライダーは、数値の範囲を直感的に選択できる便利な UI コンポーネントです。さらにカスタマイズしたい場合は、CSSを活用してデザインを変更したり、JavaScriptで動的な制御を追加したりすることも可能です。ぜひ、自分のプロジェクトに活かしてみてください。