Bootstrap 5 スケール

カスタム範囲

範囲メニューのスタイルを設定するには、 .form-range type="range"のinput要素にクラスを追加する：

カスタム範囲：

例

<label for="customRange" class="form-label">カスタム範囲</label>
<input type="range" class="form-range" id="customRange">

自分で試してみる

ステップ

デフォルトでは、範囲の値の間隔は 1 です。以下を使用して、 step 属性を変更する：

例

<input type="range" class="form-range" step="10">

自分で試してみる

最小値と最大値

デフォルトでは、最小値は 0、最大値は 100 です。以下を使用して、 min および/または max 属性を変更する：

例

<input type="range" class="form-range" min="0" max="4">

自分で試してみる