Bootstrap 5 選択範囲
この記事では、Bootstrap 5 で数値範囲を選択するための新しいコンポーネント、 Form Range について説明します。 スライダーを作成してカスタマイズし、数値範囲を選択する方法を学びます。
1. Form Range とは
Form Range コンポーネントは、ユーザーがスライダーをドラッグして 数値範囲を選択できるようにします。 HTML5 の <input type="range"> 要素に基づいて構築されています。
2. 基本的な使い方
Form Range の基本的な HTML 構造は、 <label> 要素と <input type="range"> 要素で構成されます。
<label for="customRange1" class="form-label">音量</label>
<input type="range" class="form-range" id="customRange1">
上記のコードは、シンプルな水平スライダーを作成します。 min、max、value 属性を使用して、 デフォルト値と範囲を設定できます。
min: スライダーの最小値を指定します。max: スライダーの最大値を指定します。value: スライダーの初期値を指定します。
<label for="customRange2" class="form-label">明るさ</label>
<input type="range" class="form-range" min="0" max="100" value="50" id="customRange2">
3. スタイルのカスタマイズ
Bootstrap 5 のユーティリティクラスを使用して、Form Range の外観をカスタマイズできます。
.form-range: デフォルトのスタイルを適用します。.form-range-sm: スライダーを小さくします。.form-range-lg: スライダーを大きくします。
より高度なスタイルのカスタマイズには、カスタム CSS または JavaScript を使用できます。
4. 無効状態
disabled 属性を使用すると、 Form Range コンポーネントを無効化して、 インタラクティブにできないようにすることができます。
<input type="range" class="form-range" disabled>
無効状態のスライダーは、 薄く表示され、 ドラッグすることができません。
5. 選択値の取得
Form Range の値は、JavaScript を使用して取得できます。
<input type="range" class="form-range" id="myRange">
<script>
const rangeInput = document.getElementById('myRange');
rangeInput.addEventListener('input', () => {
console.log(rangeInput.value);
});
</script>
上記のコードは、 スライダーの値が変更されるたびに、 コンソールに現在の値を出力します。
6. 使用例と適用シナリオ
Form Range は、様々な場面で使用できます。 以下に、いくつかの例を示します。
| 例 | 説明 |
|---|---|
| 音量コントロール | オーディオやビデオの再生音量を調整します。 |
| 明るさ調節 | 画面の明るさを調整します。 |
| 価格範囲選択 | 商品検索で価格の範囲を指定します。 |
| 日付範囲選択 | カレンダーで日付の範囲を指定します。 |
実際のニーズに応じて、Form Range コンポーネントのさらなる適用可能性を探ってください。
関連する質問と回答
Q1. Form Range の値を整数だけに制限できますか？
A1. はい、JavaScript を使用して、 スライダーの値が変更されるたびに、 最も近い整数に丸めることができます。
Q2. 2 つのスライダーを連携させて、範囲を選択できますか？
A2. はい、JavaScript を使用して、 一方のスライダーの値が変更されたときに、 もう一方のスライダーの値を更新できます。
Q3. Form Range のスタイルをもっと細かくカスタマイズできますか？
A3. はい、カスタム CSS を使用して、 スライダーのトラック、 サム、 およびその他の要素の外観をカスタマイズできます。