Bootstrap 选择区间
🎯 概述
Bootstrap 选择区间（Range）是一个滑块输入控件，用于让用户在指定范围内选择数值。
📦 基本用法
html
<label for="customRange1" class="form-label">基本区间选择</label>
<input type="range" class="form-range" id="customRange1">🎨 最小值和最大值
html
<label for="customRange2" class="form-label">区间 (0-5)</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">📏 步长
html
<label for="customRange3" class="form-label">步长为 0.5</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">🌟 实际示例
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 选择区间示例</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container my-5">
<h1>Bootstrap 选择区间示例</h1>
<div class="mb-3">
<label for="range1" class="form-label">音量: <span id="value1">50</span></label>
<input type="range" class="form-range" id="range1" min="0" max="100" value="50">
</div>
<div class="mb-3">
<label for="range2" class="form-label">亮度: <span id="value2">75</span></label>
<input type="range" class="form-range" id="range2" min="0" max="100" value="75">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.getElementById('range1').addEventListener('input', function() {
document.getElementById('value1').textContent = this.value;
});
document.getElementById('range2').addEventListener('input', function() {
document.getElementById('value2').textContent = this.value;
});
</script>
</body>
</html>