メインコンテンツへスキップ

レンジ入力(Range) v5.0.0-alpha1設定変更

ブラウザのデフォルトのレンジ入力をカスタムバージョンに置き換え。

目次

概要(Overview)v5.0.0-alpha1クラス名変更

.form-range を使用してカスタムの <input type="range"> コントロールを作成。トラック(背景)とつまみ(値)はどちらも、ブラウザ間で同じように表示されるようにスタイル設定されている。Edgeレガシー版とFirefoxだけは、進行状況を視覚的に示す手段として、つまみの左右からのトラックの「埋め込み」をサポートしているため、現時点ではサポートしていない。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<label for="formRange1" class="form-label">レンジの実例</label>
<input type="range" class="form-range" id="formRange1">
※Bootstrap4.xの設定例 赤背景が変更箇所
カスタム・レンジ入力<label for="formRange1">レンジの実例</label>
<input type="range" class="custom-range" id="formRange1">
【設定】
  • input[type="range"].form-range を入れる
【変更履歴】
  • 【v5.0.0-alpha1】
    • .custom-range.form-range
    • <label>.form-label を入れる

 

レンジの無効化(Disabled)

レンジ入力に disabled ブール属性を追加してグレー表示にし、ポインターイベントを削除。

見本
設定例
<label for="disabledRange" class="form-label">無効化したレンジ入力</label>
<input type="range" class="form-range" id="disabledRange" disabled>
【設定】
  • 無効化したいレンジ入力(input.form-range[type="range"])に [disabled] を追加

 

最小と最大(Min and max)

レンジ入力は、それぞれ minmax0100 の暗黙の値を持つ。min 属性と max 属性を使用するユーザーには新しい値が指定可能。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<label for="formRange2" class="form-label">レンジの実例</label>
<input type="range" class="form-range" min="0" max="5" id="formRange2">

 

ステップ(Steps)

デフォルトでは、レンジ入力は整数値で「スナップ」する。これを変更するには、step 値を指定する。以下の例では、step="0.5" を使用してステップ数を2倍にする。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<label for="formRange3" class="form-label">レンジの実例</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="formRange3">