当前位置: 首页 > 未分类>阅读正文

bootstrap5滚动条

2022.8.6 朱丰华 36 次 留下评论 1282字

概述

使用 <input type="range"> 创建自定义<input type="range">控件。track(背景)和thumb(值)的样式在不同的浏览器中都是相同的。由于只有edgelegacy和Firefox支持从拇指的左侧或右侧“填充”轨迹,以直观地指示进度,因此我们目前不支持它。

实例:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap 101</title>
    <link rel="stylesheet" href="https://www.52dixiaowo.com/tools/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <script src="https://www.52dixiaowo.com/tools/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
</head>

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

</html>

禁用

在输入上添加禁用的布尔属性 disabled,使其显示为灰色,并删除指针事件。

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

最大最小值

范围输入分别具有min和max,0 and 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=“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">

本篇完,还有疑问?留下评论吧

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注