レンジスライダーとは

つまみをドラッグして数値を決める入力部品。最小値・最大値・刻み幅を指定でき、現在値を表示に反映する。

概要

つまみをドラッグしたり矢印キーで動かしたりして、数値を選ぶための入力部品です。<input type="range"> に最小値（min）・最大値（max）・刻み幅（step）を指定して使い、見た目はブラウザ標準のままだと地味なので、トラックとつまみを CSS で装飾するのが一般的です。今どの値になっているかは <output> 要素などで別途表示しないと分からないため、入力に合わせて数値表示を更新する処理を添えます。

別名

表記ゆれ：スライダー入力、範囲指定、range slider

「範囲指定」は最小値〜最大値の 2 点を選ばせるタイプ（デュアルスライダー）を指すときにも使われますが、ここでは単一の値を選ぶ一般的なレンジスライダーを扱います。

AI への伝え方

「音量調整のレンジスライダーを作って、0〜100 の範囲で 5 刻み、現在値を横に表示して」のように、最小値・最大値・刻み幅と、値の表示が欲しいかどうかをセットで伝えます。

似たパーツとの違い

「カルーセル」は画像やカードを左右に送る表示の仕組みで、数値を入力する部品ではありません。操作としてはドラッグやスワイプが共通しますが、目的が入力か表示送りかという違いがあります。

デモ

音量

0〜100 の範囲で、5 刻みに調整できます

コード

HTML

<div class="range-slider-demo">
  <label class="range-slider-demo__label" for="range-slider-demo-input">音量</label>
  <div class="range-slider-demo__row">
    <input
      class="range-slider-demo__input"
      type="range"
      id="range-slider-demo-input"
      name="volume"
      min="0"
      max="100"
      step="5"
      value="60"
    />
    <output class="range-slider-demo__output" for="range-slider-demo-input">60</output>
  </div>
  <p class="range-slider-demo__hint">0〜100 の範囲で、5 刻みに調整できます</p>
</div>

CSS

.range-slider-demo {
  font-family: sans-serif;
  max-width: 280px;
}

.range-slider-demo__label {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #333;
}

.range-slider-demo__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.range-slider-demo__input {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  height: 6px;
  border-radius: 3px;
  background: #e6e6e6;
}

.range-slider-demo__input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #0017c1;
  cursor: pointer;
}

.range-slider-demo__input::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #0017c1;
  cursor: pointer;
}

.range-slider-demo__input::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: #e6e6e6;
}

.range-slider-demo__input:focus-visible {
  outline: 2px solid #0017c1;
  outline-offset: 4px;
}

.range-slider-demo__output {
  min-width: 32px;
  font-size: 14px;
  font-weight: 700;
  color: #333;
  text-align: right;
}

.range-slider-demo__hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: #666;
}

const rangeSliderDemoInput = document.getElementById("range-slider-demo-input");
const rangeSliderDemoOutput = document.querySelector(".range-slider-demo__output");

rangeSliderDemoInput.addEventListener("input", () => {
  rangeSliderDemoOutput.textContent = rangeSliderDemoInput.value;
});