范围

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

更新于: 2023-04-30 14:28:21 查看: 546

发布于: 2021-8-31 20:33 发布者: 大米

概述 

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

禁用 

在输入上添加 disabled 的布尔属性，使其呈现灰色外观，并删除指针事件。
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>

最小和最大

范围输入有隐式的值 min 和 max - 0 和 100，分别。您可以为那些使用 min 和 max 属性的对象指定新的值
<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" 将步数加倍
<label for="customRange3" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">

扫描二维码，手机查看
声明：部分数据/图片来源互联网，不代表Hluse Doc.,真实性请妥善甄别。
收藏 邀请