概述
使用 <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">本篇完，还有疑问？留下评论吧