Bootstrap5 选择区间（一文讲透）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在现代 Web 开发中，用户界面的交互性需求日益增长。例如，用户可能需要通过一个直观的控件快速选择价格区间、时间范围或评分范围。Bootstrap 作为最受欢迎的前端框架之一，提供了强大的组件库，其中 Bootstrap5 选择区间（Range Input） 便是实现这类功能的核心工具。本文将从基础到进阶，结合实例和代码，深入讲解如何在实际项目中灵活运用这一组件，并探讨其背后的实现原理与优化技巧。

基础用法：快速搭建选择区间

HTML 结构与基本样式

Bootstrap5 的选择区间组件基于原生 HTML 的 <input type="range"> 元素，但通过框架提供的类名和样式增强其视觉效果。以下是一个最简示例：

<div class="mb-3">
  <label for="price-range" class="form-label">价格区间选择</label>
  <input type="range" class="form-range" min="0" max="1000" id="price-range">
</div>

在这个例子中：

• form-range 是 Bootstrap 的核心类名，用于定义选择区间的基本样式。
• min 和 max 属性定义了可选值的范围（例如，0 到 1000 元）。
• id 和 label 的绑定确保了标签与输入框的关联性，提升可访问性。

初始化与动态值获取

虽然 <input type="range"> 是原生 HTML 元素，但通过 Bootstrap 的样式和 JavaScript 可以增强其交互性。例如，可以通过以下代码实时显示当前选择的值：

<div class="mb-3">
  <label for="volume-range" class="form-label">音量控制</label>
  <input type="range" class="form-range" min="0" max="100" value="50" id="volume-range">
  <p class="text-muted">当前音量：50%</p>
</div>

<script>
  document.getElementById('volume-range').addEventListener('input', function() {
    const currentValue = this.value;
    document.querySelector('.text-muted').textContent = `当前音量：${currentValue}%`;
  });
</script>

样式定制：颜色与进度条

Bootstrap 允许通过 CSS 自定义选择区间的手柄和进度条颜色。例如：

<!-- HTML 结构 -->
<div class="mb-3">
  <input type="range" class="form-range" min="0" max="100" style="--bs-range-thumb-color: #28a745; --bs-range-progress-bg: #28a745;">
</div>

/* 或者通过 CSS 类定义 */
.custom-range {
  --bs-range-thumb-color: #28a745;
  --bs-range-progress-bg: #28a745;
}

这里通过 CSS 变量 --bs-range-thumb-color 和 --bs-range-progress-bg 分别控制手柄和进度条的颜色。绿色（#28a745）是 Bootstrap 的默认成功色，用户可根据品牌需求调整为其他颜色。

进阶功能：实现双向绑定与动态交互

结合表单与双向数据绑定

在实际项目中，选择区间通常需要与表单数据绑定。例如，在电商场景中筛选商品价格区间：

<form>
  <div class="mb-3">
    <label for="price-min" class="form-label">最低价格</label>
    <input type="number" class="form-control" id="price-min" min="0" max="1000" value="0">
  </div>
  <div class="mb-3">
    <label for="price-max" class="form-label">最高价格</label>
    <input type="number" class="form-control" id="price-max" min="0" max="1000" value="1000">
  </div>
  <div class="mb-3">
    <input type="range" class="form-range" min="0" max="1000" id="price-slider" value="1000">
  </div>
  <button type="submit" class="btn btn-primary">筛选</button>
</form>

<script>
  const slider = document.getElementById('price-slider');
  const minInput = document.getElementById('price-min');
  const maxInput = document.getElementById('price-max');

  slider.addEventListener('input', function() {
    const value = parseInt(this.value);
    // 假设最高价格始终为 1000，这里仅更新最低价格
    minInput.value = value;
  });

  // 反向同步输入框到滑动条
  minInput.addEventListener('input', function() {
    slider.value = this.value;
  });
</script>

响应式布局与移动端适配

在移动端，选择区间的宽度和手柄的可操作性需要特别优化。Bootstrap 的响应式类（如 w-100）可确保组件在不同屏幕尺寸下自适应：

<div class="mb-3">
  <input type="range" class="form-range w-100" min="0" max="100">
</div>

此外，通过媒体查询可以进一步调整移动端样式：

@media (max-width: 768px) {
  .form-range {
    height: 2rem; /* 增加进度条高度，提升触控精度 */
  }
}

实战案例：电商价格筛选器

场景描述

假设我们正在开发一个电商网站，需要让用户通过滑动条选择商品价格区间，并实时过滤商品列表。

实现步骤

1. HTML 结构：
   • 使用两个滑动条分别控制最低价和最高价。
   • 添加一个商品列表容器，用于动态更新结果。

<div class="container mt-5">
  <div class="row">
    <div class="col-md-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">价格筛选</h5>
          <div class="mb-3">
            <label for="min-price" class="form-label">最低价格</label>
            <input type="range" class="form-range" min="0" max="5000" value="0" id="min-price">
          </div>
          <div class="mb-3">
            <label for="max-price" class="form-label">最高价格</label>
            <input type="range" class="form-range" min="0" max="5000" value="5000" id="max-price">
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-8">
      <div id="product-list" class="row row-cols-1 row-cols-md-3 g-4"></div>
    </div>
  </div>
</div>

2. JavaScript 动态更新：
   • 监听滑动条的 input 事件，实时获取当前价格区间。
   • 根据区间过滤商品数据，并重新渲染列表。

const products = [
  { id: 1, name: "手机", price: 3000 },
  { id: 2, name: "笔记本电脑", price: 8000 },
  { id: 3, name: "耳机", price: 500 },
  // 更多商品数据...
];

function renderProducts(min, max) {
  const filtered = products.filter(p => p.price >= min && p.price <= max);
  const productList = document.getElementById('product-list');
  productList.innerHTML = filtered.map(p => `
    <div class="col">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">${p.name}</h5>
          <p class="card-text">价格：${p.price} 元</p>
        </div>
      </div>
    </div>
  `).join('');
}

document.getElementById('min-price').addEventListener('input', function() {
  const min = parseInt(this.value);
  const max = parseInt(document.getElementById('max-price').value);
  renderProducts(min, max);
});

document.getElementById('max-price').addEventListener('input', function() {
  const max = parseInt(this.value);
  const min = parseInt(document.getElementById('min-price').value);
  renderProducts(min, max);
});

3. 样式优化：
   • 通过 CSS 变量为两个滑动条设置不同颜色，增强视觉区分度。

#min-price {
  --bs-range-thumb-color: #dc3545;
  --bs-range-progress-bg: #dc3545;
}

#max-price {
  --bs-range-thumb-color: #20c997;
  --bs-range-progress-bg: #20c997;
}

总结

通过本文的讲解，读者可以掌握 Bootstrap5 选择区间 的核心用法、样式定制技巧以及实际项目的应用场景。无论是简单的音量控制，还是复杂的电商价格筛选器，这一组件都能提供高效且直观的交互体验。

关键知识点回顾

通过将 Bootstrap5 选择区间 与业务场景结合，开发者可以显著提升用户体验，同时减少重复代码的编写。无论是初学者还是中级开发者，掌握这一工具都能为 Web 项目的交互设计提供更多可能性。