Bootstrap5 范围(Range)

半兽人 发表于: 2020-07-29   最后更新时间: 2021-08-04 23:22:27  
{{totalSubscript}} 订阅, 2,947 游览

概述(Overview)

.form-range创建自定义<input type="range">控件。轨迹(背景)和拇指(值)的样式在不同的浏览器上都是一样的。由于只有Firefox支持从拇指的左边或右边 "filling"他们的轨道,作为视觉上指示进度的一种手段,我们目前不支持它。

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

在线运行

最小和最大(Min and max)

范围输入有隐含的最小最大值,分别为 0100。你可以使用minmax属性为它们指定新的值。

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

在线运行

Steps(步数)

默认情况下,范围输入"snap"是为整型。要改变这一点,你可以指定步数的值,在下面的例子中,我们通过设置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">

在线运行

更新于 2021-08-04
在线,1小时前登录

查看bootstrap5更多相关的文章或提一个关于bootstrap5的问题,也可以与我们一起分享文章
提问