HTML rangeスライダー：min・max・stepと値表示・初期化

HTML input type="range" は、スライダーを使用して定義された範囲内の数値を選択します。min、max、step でその範囲と間隔を設定し、valueで初期値を設定します。音量や明るさなどの相対調整に適しており、現在の数値を表示するには別の出力要素と JavaScript を使用します。

範囲とデフォルトを理解する

範囲入力には空の値がありません。値を省略しても「まだ選択されていない」という意味にはならず、required 属性も適用されません。調査の選択が明示的に行われたかどうかが重要な場合は、明示的な選択肢や別の入力方法を検討してください。

ステップは基準値から計算されます。例えば、min="16" max="32" step="2" では 16, 18, 20 から 32 までです。ブラウザは初期値が範囲やステップ外の場合に正規化できるため、実際の現在の値が意図したデフォルト値と一致しているか確認してください。

完全な例: フォントサイズをライブで変更する

このコードを range.html として保存し、ブラウザで開いてください。サーバーやライブラリは不要です。スライダーは例文のフォントサイズを16pxから32pxまで2pxずつ変更し、送信すると実際のフォームデータが表示されます。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>rangeで文字サイズを調整</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    label { display: block; margin-bottom: 12px; }
    input[type="range"] { width: 20rem; max-width: 100%; accent-color: #1769aa; }
    #preview { overflow-wrap: anywhere; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>文字サイズの調整</h1>
  <form id="demo">
    <label for="fontSize">例の文字サイズ（16～32px、2px単位）</label>
    <input id="fontSize" name="fontSize" type="range"
      min="16" max="32" step="2" value="20">
    <p>現在のサイズ： <output id="selected" for="fontSize">20</output>px</p>
    <p><button type="submit">送信値を確認</button>
      <button type="reset">初期化</button></p>
  </form>
  <p id="preview">スライダーを動かすと、この文の文字サイズが変わります。</p>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const slider = document.querySelector('#fontSize');
    const selected = document.querySelector('#selected');
    const preview = document.querySelector('#preview');
    const result = document.querySelector('#result');
    function update() {
      selected.value = slider.value;
      preview.style.fontSize = `${slider.valueAsNumber}px`;
      result.textContent = '';
    }
    slider.addEventListener('input', update);
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify([...new FormData(form).entries()], null, 2);
    });
    form.addEventListener('reset', () => {
      requestAnimationFrame(update);
    });
    update();
  </script>
</body>
</html>

1. 初期表示サイズは20pxで、プレビューもそのサイズを使います。送信すると、fontSize という名前の下に文字列 "20" が表示されます。
2. スライダーをポインターで動かし、番号とフォントサイズが一緒に更新されることを確認してください。Tab キーでスライダーに到達し、矢印キーも試してください。
3. 例えば、右矢印キーを1ステップ押すと20が22に変わります：表示は22になり、フォントサイズも22pxになります。送信すると "22" が表示されます。
4. リセットはスライダー、数値、およびプレビューサイズを20に戻します。リセットハンドラは次のフレームでの更新をスケジュールするため、ネイティブリセットが反映された後の値を読み取ります。

この例は調整中にも即時更新するためにinputイベントを使います。操作が確定した時点で処理する場合はchangeイベントを検討します。発生する時点と目的が異なるため、実時間のプレビューが必要かどうかで選んでください。

現在値、送信済み値、初期値を区別する

slider.valueは文字列としての現在の数値であり、slider.valueAsNumberは数値です。HTMLのvalue属性は初期値です：スライダーを動かしてもその属性の文字列は変更されません。表示または保存するには、要素の現在の値を読み取ってください。

output は計算された結果または選択された結果を表示します。送信されたフォームフィールドを置き換えるものではありません。例では名前付き範囲の入力を送信します。実際のサーバー保存には既存のルートとリクエスト処理、サーバー側での範囲およびステップの検証が必要です。

範囲と数値のどちらかを選択し、表示を確認してください。

ユーザーが正確な数量、金額、または長さを入力する必要がある場合は、数値入力の範囲とステップ設定 を検討してください。スライダーはおおよそのレベルを素早く調整できますが、狭い画面で正確な数字を選ぶことは難しい場合があります。精度が必要な場合、スライダーに同期した数値入力を併用するとよいでしょう。

accent-color はネイティブスライダーのアクセントカラーを変更できます。必ずしもすべての部分を同じ色にするわけではなく、外観はブラウザやオペレーティングシステムによって異なります。モバイル幅、十分な操作スペース、ラベルの関連付け、キーボードフォーカス、数値表示をまとめて確認してください。

属性の既定値と対応状況はMDNのrange入力リファレンスで確認できます。