范围

使用我们的自定义范围输入来实现一致的跨浏览器样式和内置定制。

本页导航↓

概述

使用 .form-range 创建自定义 <input type="range"> 控件。轨迹(背景)和拇指(值)的样式在不同浏览器中都是相同的。因为只有Edge Legacy和Firefox支持从拇指的左边或右边“填充”轨迹来直观地显示进度，所以我们目前不支持它。

Example range

<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">

禁用

在输入上添加 disabled 的布尔属性，使其呈现灰色外观，并删除指针事件。

Disabled range

<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>

最小和最大

范围输入有隐式的值 min 和 max - 0 和 100，分别。您可以为那些使用 min 和 max 属性的对象指定新的值。

Example range

<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">

步骤长度

默认情况下，范围输入“捕捉”为整数值。要更改此设置，可以指定 step 值。在下面的示例中，我们使用 step="0.5" 将步数加倍。

Example range

<label for="customRange3" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">