Bootstrap Slider 滑块 v11.0.2

官方已有 .form-range 原生滑块样式，但只能拖单值。bootstrap-slider 在其之上提供双滑块范围、常显提示气泡与程序化取值；v11 为原生 JavaScript 编写，不依赖 jQuery，可直接配合 Bootstrap 5.3 使用。

官方对照

先看 Bootstrap 官方能做什么、本库补齐了什么。

官方已有

对比维度	Bootstrap 官方	bootstrap-slider
能力定位	`<input type="range" class="form-range">` 原生滑块样式	功能增强的滑块控件，官方样式的超集
核心特性	单值拖动，外观统一，无提示气泡	`range:true` 双滑块区间、tooltip 常显、`slide` 事件、程序化取值
依赖与体积	零依赖	v11 原生 JS，不依赖 jQuery，单文件约 20KB
适用场景	表单里的单值选择（音量、数量）	价格区间、年龄范围、双阈值筛选等双滑块场景
与 Bootstrap 5.3	原生支持	v11 兼容 BS5；v9 及以前是 jQuery 插件版本，请勿混用；下方示例真实可拖动

对照表说明

结论：官方「已有」滑块的基础样式，单值场景直接用 .form-range 即可；
需要双滑块范围等增强能力时选用 bootstrap-slider，已在 Bootstrap 5.3.8 下真实渲染验证。

引入方式

通过 jsDelivr 固定版本引入，无需 jQuery、无需 Popper。样式放 <head>，脚本放 <body> 末尾；初始化全局构造函数为 Slider。

引入代码

<!-- 样式 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-slider@11.0.2/dist/css/bootstrap-slider.min.css" rel="stylesheet">

<!-- 脚本 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-slider@11.0.2/dist/bootstrap-slider.min.js"></script>

基础示例

在一个 <input type="text"> 上调用 new Slider(element, options) 即可。下方滑块已真实渲染，可以直接拖动；拖动时 slide 事件实时更新旁边的数值。

亮度调节：40

HTML + 初始化 JS

<label>亮度：<span id="sl-basic-val">40</span></label>
<input id="sl-basic" type="text">

<script>
var s = new Slider('#sl-basic', {
  min: 0, max: 100, value: 40, step: 1
});
s.on('slide', function (v) {
  document.getElementById('sl-basic-val').textContent = v;
});
</script>

范围滑块（双滑块）

设置 range: true 并把 value 传成双元素数组，即出现两个手柄构成区间选择；tooltip: 'always' 让数值气泡常显。下方区间为 0–1000 元，步长 10。

价格区间筛选

HTML + 初始化 JS

<input id="sl-range" type="text">

<script>
new Slider('#sl-range', {
  min: 0,
  max: 1000,
  value: [200, 700],      // 双手柄：起始 / 结束
  step: 10,
  range: true,
  tooltip: 'always'        // 数值气泡常显
});
</script>