Bootstrap5 选择区间学习笔记
什么是选择区间？
选择区间（Range）是指由一个开始点和一个结束点组成的一段区间。在前端开发中，选择区间通常用于用户的输入交互，比如日期范围选择、时间范围选择、价格区间选择等。
Bootstrap5 中的选择区间组件
Bootstrap5 提供了一个名为 Range 的组件，用于快速构建选择区间交互界面。下面是一个示例代码：
htmlCopy Code<input type="range" class="form-range" min="0" max="100"/>
可以看到，我们只需在 HTML 中添加一个 input 元素，并指定 type="range" 属性即可创建一个选择区间组件。在这个组件中，用户可以通过拖动滑块调整区间的起始位置和结束位置。
除了最基本的使用方式外，Bootstrap5 还提供了许多选项和样式来自定义选择区间的外观和行为。比如，我们可以通过 min 和 max 属性来指定允许的数值范围；通过 step 属性来指定滑块移动的步长；通过 value 属性来设置初始的数值；通过 disabled 属性来禁用该组件等等。
示例
下面是一个完整的示例代码，演示了如何使用 Bootstrap5 中的选择区间组件来实现一个日期范围选择的交互界面。
htmlCopy Code<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>日期范围选择</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h1>日期范围选择</h1>
<div class="mt-3 mb-3">
<label for="start">起始日期：</label>
<input type="date" id="start" class="form-control">
</div>
<div class="mt-3 mb-3">
<label for="end">结束日期：</label>
<input type="date" id="end" class="form-control">
</div>
<div class="mt-3 mb-3">
<label for="range">日期范围：</label>
<input type="range" id="range" class="form-range" min="0" max="30" value="0">
</div>
</div>
</body>
</html>
在这个示例中，我们创建了一个日期范围选择的交互界面，包括起始日期选择框、结束日期选择框和日期区间选择组件。用户可以通过选择起始日期和结束日期，并拖动日期区间选择组件来指定一个时间段。同时，根据日期区间选择组件的值，我们还可以实时显示该时间段的天数。