JavaScript | HTML / CSS 連携：フォーム応用－ range入力

JavaScript

2026.07.15

range入力は「スライダーで“数値の範囲”から直感的に選んでもらう入力欄」
range入力の基本形と「min・max・step」の意味
1. いちばんシンプルな range入力
初期値（value）で「スタート位置」を決める
1. 真ん中からスタートさせる例
range入力の値は「数値っぽいけど文字列」で来る
1. JavaScriptで値を読むときの基本
range入力＋表示の“定番コンビ”を作る
1. スライダーと現在値をセットで見せる
CSSでrange入力の見た目を軽く整える
1. 幅を広げて“スライダー感”を出す
range入力の「意味」をちゃんと設計する
1. min・max・step を“適当に”決めない
フォーム送信と range入力：サーバー側には「選ばれた数値」が飛んでいく
1. 普通のフォームに組み込んだ例
range入力を使うか迷ったときの判断基準
1. 「ここは“数値だけど、感覚で調整してほしい”場面か？」
初心者として「range入力」で絶対に掴んでほしいこと

range入力は「スライダーで“数値の範囲”から直感的に選んでもらう入力欄」

type="range" は、 ユーザーに「ある範囲の数値」を、スライダーを動かして選んでもらうための入力欄 です。

テキストで「50」と打ってもらう代わりに、バーを左右に動かして「0〜100の中からどれくらい？」を選んでもらうイメージ。

音量明るさ評価（0〜10）サイズ調整

みたいな「数値だけど、感覚で決めたいもの」に向いています。

range入力の基本形と「min・max・step」の意味

いちばんシンプルな range入力

<input type="range" name="volume">

これだけでもスライダーは出ますが、範囲や刻みが分かりづらいので、実用的には min・max・step をほぼ必ず付けます。

<input
  type="range"
  name="volume"
  min="0"
  max="100"
  step="1"
>

ここでの意味は、

min="0" → 最小値は 0
max="100" → 最大値は 100
step="1" → 1 ずつ動く

ということです。

ユーザーがスライダーを動かすと、 0〜100 の整数のどれかが選ばれます。

range入力は「min〜max の間を、step刻みで動くスライダー」。 この 3 つで“このスライダーのルール”が決まる。

初期値（value）で「スタート位置」を決める

真ん中からスタートさせる例

<input
  type="range"
  name="volume"
  min="0"
  max="100"
  step="1"
  value="50"
>

この場合、最初は 50 の位置にスライダーが置かれます。

「デフォルトの音量は 50」「明るさは真ん中から」

みたいに、ユーザーにとって自然な初期値を設定しておくと、操作が楽になります。

range入力の値は「数値っぽいけど文字列」で来る

JavaScriptで値を読むときの基本

HTML：

<input
  type="range"
  id="volume"
  name="volume"
  min="0"
  max="100"
  step="1"
  value="50"
>
<span id="volumeValue">50</span>

JavaScript：

const range = document.querySelector("#volume");
const display = document.querySelector("#volumeValue");

range.addEventListener("input", () => {
  const value = range.value; // "50" ← 文字列
  display.textContent = value;
});

const range = document.querySelector("#volume");
const display = document.querySelector("#volumeValue");

range.addEventListener("input", () => {
  const value = range.value; // "50" ← 文字列
  display.textContent = value;
});

JavaScript

ここでのポイントは、

range.value は「今の位置の値」
ただし型は文字列 "50"

ということです。

計算したいときは、数値に変換します。

const num = Number(range.value); // 50（数値）

const num = Number(range.value); // 50（数値）

JavaScript

range入力だからといって、 JavaScript側でいきなり数値として扱えるわけではない。 “まず文字列で来る → 必要なら数値に変換”という感覚を持っておくと、バグを減らせます。

range入力＋表示の“定番コンビ”を作る

スライダーと現在値をセットで見せる

HTML：

<p>音量：</p>
<input
  type="range"
  id="volume"
  name="volume"
  min="0"
  max="100"
  step="1"
  value="50"
>
<span id="volumeValue">50</span>

JavaScript：

const range = document.querySelector("#volume");
const display = document.querySelector("#volumeValue");

range.addEventListener("input", () => {
  display.textContent = range.value;
});

const range = document.querySelector("#volume");
const display = document.querySelector("#volumeValue");

range.addEventListener("input", () => {
  display.textContent = range.value;
});

JavaScript

input イベントは、スライダーを動かしている最中にも発火します。

これで、

スライダーを動かす
右側の数字がリアルタイムに変わる

という「気持ちいい UI」が作れます。

range入力は「感覚的な操作」、 隣の数字表示は「正確な値の確認」。 このセットで使うのが定番パターンです。

CSSでrange入力の見た目を軽く整える

幅を広げて“スライダー感”を出す

<input
  type="range"
  id="volume"
  name="volume"
  min="0"
  max="100"
  step="1"
  value="50"
>

#volume {
  width: 300px;
}

これだけでも、「ちゃんとしたスライダー」っぽくなります。

ブラウザごとに細かい見た目は違いますが、幅や位置は CSS である程度整えられます。

range入力の「意味」をちゃんと設計する

min・max・step を“適当に”決めない

例えば「明るさ」を調整するスライダーを作るとします。

<input
  type="range"
  name="brightness"
  min="0"
  max="1"
  step="0.1"
  value="0.5"
>

ここでの意味は、

0.0〜1.0 の間
0.1刻み
初期値は 0.5

です。

JavaScript側では、この値をそのまま「割合」として使えます。

const brightness = Number(range.value); // 0.0〜1.0

const brightness = Number(range.value); // 0.0〜1.0

JavaScript

CSSの filter: brightness() に使ったり、計算に使ったりできます。

range入力は「ユーザーにどんな範囲・刻みで調整してほしいか」を min・max・step で設計するもの。 ここを丁寧に決めると、UIの気持ちよさが変わります。

フォーム送信と range入力：サーバー側には「選ばれた数値」が飛んでいく

普通のフォームに組み込んだ例

<form action="/settings" method="post">
  <p>音量：</p>
  <input
    type="range"
    name="volume"
    min="0"
    max="100"
    step="1"
    value="50"
  >

  <button type="submit">保存</button>
</form>

ユーザーが 80 までスライダーを動かして送信すると、サーバー側にはだいたい volume = "80" という形で届きます。

サーバー側では、