范围
使用我们的自定义范围输入来实现一致的跨浏览器样式和内置定制。更新于: 2023-04-30 14:28:21 查看: 483
发布于: 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.,真实性请妥善甄别。