【HTML Living Standard】range属性値の使い方
range属性値の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
rangeプロパティは、HTMLの<input>要素のtype属性に指定された際に、スライダー形式のユーザーインターフェース（UI）部品としての特性を保持するプロパティです。このプロパティを設定することで、ウェブページ上にスライダーが表示され、ユーザーは特定の数値範囲内で直感的に値を選択できるようになります。
具体的には、type="range"と記述された<input>要素は、横方向または縦方向（CSSによる）に動かせるツマミを持つバーとして描画されます。ユーザーがツマミをドラッグすることで、選択された数値が要素のvalue属性に反映されます。
このrangeプロパティは、以下の補助的な属性と組み合わせて使用されることで、その機能が強化されます。
min属性：選択可能な最小値を定義します。max属性：選択可能な最大値を定義します。step属性：ツマミを動かした際の増分値（または減分値）を定義します。この値を設定することで、選択できる値が特定の単位に制限されます。value属性：スライダーの初期値、または現在の選択値を保持します。
これらの属性を適切に設定することで、音量調整、色の選択、数量指定など、連続的な数値入力が必要な場面で、視覚的かつ操作性に優れた入力コントロールを提供します。また、JavaScriptと組み合わせることで、スライダーの値の変更に応じて動的な処理を実行したり、現在の値を取得したりすることも可能です。rangeプロパティは、ユーザーが入力する数値の範囲が広く、おおよその値を選択したい場合に特に有効な入力形式です。
構文(syntax)
1<input type="range" min="0" max="100" value="50" step="1">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML Range Inputでスライダーをデザインする
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML Range Input Sample</title> 7 <style> 8 /* 全体的なフォント設定 */ 9 body { 10 font-family: Arial, sans-serif; 11 margin: 20px; 12 background-color: #f4f4f4; 13 display: flex; 14 justify-content: center; 15 align-items: center; 16 min-height: 100vh; 17 } 18 19 /* スライダーコンテナのスタイル */ 20 .range-container { 21 padding: 25px; 22 border: 1px solid #e0e0e0; 23 border-radius: 10px; 24 background-color: #ffffff; 25 width: 100%; 26 max-width: 450px; /* 最大幅を設定 */ 27 box-shadow: 0 6px 12px rgba(0,0,0,0.1); 28 text-align: center; 29 } 30 31 /* ラベルのスタイル */ 32 label { 33 display: block; 34 margin-bottom: 15px; 35 font-weight: bold; 36 color: #333; 37 font-size: 1.2em; 38 } 39 40 /* HTMLのrange入力要素の基本的なデザイン */ 41 input[type="range"] { 42 width: 90%; /* コンテナの幅いっぱいに広げる */ 43 height: 10px; /* トラックの高さ */ 44 cursor: pointer; 45 margin-bottom: 20px; 46 /* デフォルトの見た目をリセット */ 47 -webkit-appearance: none; 48 appearance: none; 49 background: transparent; /* 背景を透明に */ 50 } 51 52 /* WebKit系ブラウザ (Chrome, Safariなど) のトラックのデザイン */ 53 input[type="range"]::-webkit-slider-runnable-track { 54 background: #ddd; /* トラックの色 */ 55 border-radius: 5px; 56 height: 10px; 57 } 58 59 /* Mozilla系ブラウザ (Firefox) のトラックのデザイン */ 60 input[type="range"]::-moz-range-track { 61 background: #ddd; /* トラックの色 */ 62 border-radius: 5px; 63 height: 10px; 64 } 65 66 /* WebKit系ブラウザのつまみのデザイン */ 67 input[type="range"]::-webkit-slider-thumb { 68 -webkit-appearance: none; 69 appearance: none; 70 height: 24px; /* つまみのサイズ */ 71 width: 24px; 72 border-radius: 50%; /* 丸い形 */ 73 background: #007bff; /* つまみの色 */ 74 margin-top: -7px; /* トラックの中央に配置 */ 75 box-shadow: 0 3px 6px rgba(0,0,0,0.2); 76 transition: background 0.3s ease; /* ホバー時のアニメーション */ 77 } 78 /* ホバー時のつまみの色を変更 */ 79 input[type="range"]::-webkit-slider-thumb:hover { 80 background: #0056b3; 81 } 82 83 /* Mozilla系ブラウザのつまみのデザイン */ 84 input[type="range"]::-moz-range-thumb { 85 height: 24px; 86 width: 24px; 87 border-radius: 50%; 88 background: #007bff; /* つまみの色 */ 89 box-shadow: 0 3px 6px rgba(0,0,0,0.2); 90 transition: background 0.3s ease; /* ホバー時のアニメーション */ 91 } 92 /* ホバー時のつまみの色を変更 */ 93 input[type="range"]::-moz-range-thumb:hover { 94 background: #0056b3; 95 } 96 97 /* 現在の値表示のスタイル */ 98 .current-value { 99 font-size: 1.3em; 100 color: #555; 101 } 102 #rangeValue { 103 font-weight: bold; 104 color: #007bff; 105 margin-left: 8px; 106 } 107 </style> 108</head> 109<body> 110 <div class="range-container"> 111 <label for="myRange">設定値を選択してください</label> 112 113 <!-- range入力要素の定義 --> 114 <!-- id: 要素を識別するID --> 115 <!-- min: 選択可能な最小値 --> 116 <!-- max: 選択可能な最大値 --> 117 <!-- value: 初期値 --> 118 <!-- step: 値の変化の単位 --> 119 <input type="range" id="myRange" min="0" max="100" value="50" step="1"> 120 121 <p class="current-value">現在の値: <span id="rangeValue">50</span></p> 122 </div> 123 124 <script> 125 // スライダー要素と値表示要素を取得 126 const rangeInput = document.getElementById('myRange'); 127 const rangeValueDisplay = document.getElementById('rangeValue'); 128 129 // スライダーの値が変更されたときに表示を更新するイベントリスナー 130 // 'input'イベントは、スライダーが動くたびに発生します。 131 rangeInput.addEventListener('input', () => { 132 // スライダーの現在の値を表示要素のテキストに設定 133 rangeValueDisplay.textContent = rangeInput.value; 134 }); 135 </script> 136</body> 137</html>
input type="range"は、数値範囲の中からスライダー形式で値を選択するためのHTML入力要素です。ユーザーはつまみをドラッグすることで、直感的に任意の数値を選ぶことができます。
この要素には、選択可能な最小値を定めるmin属性、最大値を定めるmax属性、要素が最初に表示されるときの初期値を設定するvalue属性、そして値が変化する単位を指定するstep属性があります。これらの属性を適切に設定することで、ユーザーが操作できる範囲や初期状態を細かく制御できます。
HTMLの要素であるため、プログラミング言語の関数のように「引数」を取ったり「戻り値」を返したりする概念はありません。代わりに、前述の属性を用いて要素の挙動や初期状態を定義します。
提供されたサンプルコードでは、CSSを用いてこのrange入力要素のデザインを大きくカスタマイズしている点が特徴です。ブラウザのデフォルトスタイルを-webkit-appearance: none;などでリセットした後、::-webkit-slider-runnable-trackや::-moz-range-thumbといったブラウザ固有の擬似要素を使い、トラック（レール部分）やつまみ（スライダーのハンドル）の色、形、サイズなどを詳細に設定しています。これにより、ウェブサイト全体のデザインと調和した、独自の見た目のスライダーを実現できます。
また、JavaScriptを組み合わせることで、スライダーが操作されるたびに現在選択されている値をリアルタイムで画面に表示するなど、動的なインタラクションを提供できます。これは、ユーザーが設定した値を即座にフィードバックする際に非常に有効です。
HTMLのinput type="range"要素を使用する際は、min、max、value、step属性を適切に設定し、選択可能な範囲や初期値、増減単位を明確にしてください。この要素のデザインはブラウザによって大きく異なるため、CSSで-webkit-appearanceや::-webkit-slider-thumbのようなベンダープレフィックス付きの擬似要素を用いて、見た目を統一的に調整する必要がある点に特にご注意ください。JavaScriptを用いると、inputイベントを監視してスライダーの現在の値をリアルタイムで取得し、画面に表示できます。また、必ず<label>要素と関連付け、何を設定するスライダーなのかを利用者に分かりやすく示すことが重要です。
HTMLレンジ入力と値の表示
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML レンジ入力と値の表示</title> 7</head> 8<body> 9 <h1>音量設定</h1> 10 11 <!-- 12 input type="range" は、指定された範囲内で数値を入力するためのスライダーを作成します。 13 min: 選択可能な最小値 14 max: 選択可能な最大値 15 value: スライダーの初期値 16 id: JavaScriptから要素にアクセスするための識別子 17 --> 18 <input type="range" id="volumeRange" min="0" max="100" value="50"> 19 20 <!-- 21 スライダーの現在の値を表示するための要素です。 22 span要素はインライン要素で、テキストの一部を表示するのに適しています。 23 id: JavaScriptから要素にアクセスするための識別子 24 --> 25 <p>現在の音量: <span id="currentVolume">50</span></p> 26 27 <script> 28 // id 'volumeRange' を持つHTML要素（スライダー）を取得します。 29 const volumeRangeInput = document.getElementById('volumeRange'); 30 // id 'currentVolume' を持つHTML要素（値を表示する場所）を取得します。 31 const currentVolumeDisplay = document.getElementById('currentVolume'); 32 33 // スライダーの値が変更されたときに実行されるイベントリスナーを追加します。 34 volumeRangeInput.addEventListener('input', () => { 35 // スライダーの現在の値を 'currentVolumeDisplay' 要素のテキストとして設定し、表示を更新します。 36 currentVolumeDisplay.textContent = volumeRangeInput.value; 37 }); 38 </script> 39</body> 40</html>
このサンプルコードは、HTMLのinput要素でtype="range"属性を使ってスライダー形式の数値入力欄を作成し、その値をJavaScriptでリアルタイムに表示する方法を示しています。input type="range"は、指定された範囲内で数値をユーザーに選択させるためのUIコンポーネントです。min属性で選択可能な最小値を、max属性で最大値を、value属性で初期値を設定します。rangeはHTMLの属性値であるため、プログラミング言語の関数やメソッドのように直接的な引数や戻り値は持ちません。
コードではまず、input type="range"で音量設定のスライダー（最小0、最大100、初期値50）を作成しています。その下の<p>タグ内にある<span>要素は、現在の音量を示すテキストを表示するために使われます。
JavaScriptの部分では、まずdocument.getElementById()を使ってスライダーと音量表示用の<span>要素をそれぞれ取得しています。次に、volumeRangeInput.addEventListener('input', ...)を用いて、スライダーの値が変更されるたびに特定の処理を実行するイベントリスナーを設定しています。このイベントが発生すると、スライダーの現在の値（volumeRangeInput.value）が取得され、それがcurrentVolumeDisplay.textContentに代入されることで、ウェブページ上の表示がリアルタイムに更新されます。これにより、ユーザーがスライダーを動かすと、即座に現在の音量値が画面に反映される動的なインタラクションが実現されます。
このサンプルコードは、HTMLのレンジ入力（スライダー）と、その値をJavaScriptでリアルタイムに表示する基本的な連携方法を示しています。
注意点として、input要素のmin、max、value属性には数値を指定しますが、これらが文字列として解釈される場合があることを理解しておきましょう。特に、スライダーの初期値と、値を表示するspan要素の初期表示を一致させておくと、ページ読み込み時の違和感が少なくなります。JavaScriptでHTML要素を取得する際のid属性は、ページ内で必ず一意にしてください。重複すると意図しない要素が操作される可能性があります。
また、スライダーの操作を検知するaddEventListenerに設定されている'input'イベントは、スライダーが動くたびに繰り返し発生します。ユーザーがスライダーを離したときに一度だけ処理を実行したい場合は、'change'イベントを検討してください。JavaScriptで取得するinput type="range"の値は文字列型として扱われるため、数値として計算に利用する場合はparseInt()などで型変換が必要です。ブラウザ間の表示の差異やアクセシビリティにも配慮すると、より実用的なコードとなります。