<input type="range">

概要

<input type="range"> はスライダーコントロールを作成します。正確な値よりも、範囲内のおおよその値を入力するのに適しています。

対応ブラウザ

基本構文

<label>音量:
  <input type="range" min="0" max="100" value="50">
</label>

<label>明るさ:
  <input type="range" min="0" max="100" step="5" value="75">
</label>

実務での使いどころ

• <input type="range"> の活用

  範囲スライダー入力要素。音量やフィルタの値など、おおよその数値入力に使用。

注意点

アクセシビリティ

• スクリーンリーダーでの読み上げを確認すること。

参考リンク

• MDN Web Docs — <input type="range">
• Can I use — <input type="range">