bootstrap不提供原生双滑块组件，需用bootstrap-slider（v11+）或bootstrapblazor实现；前者兼容多端且支持range:true及数组值绑定，后者在blazor中更简洁高效。
Bootstrap 本身不提供原生的范围滑块组件，input[type="range"] 是浏览器内置控件，但默认只支持单值；要做「范围选择」（即双滑块选区间），必须借助第三方插件或手写逻辑。直接用 Bootstrap 的 .form-range 类无法实现双值绑定，强行改样式也无效。
为什么 bootstrap-slider 是最稳妥的选择
社区主流方案是 bootstrap-slider（v11+），它专为 Bootstrap 3/4/5 设计，不依赖 jQuery（新版支持纯 JS 初始化），且对移动端触摸、Safari clip-path 兼容性问题做了封装处理。
-
range: true启用双滑块模式，value必须传数组，如[20, 80]，否则会静默失败 - 不推荐用
data-provide="slider"自动初始化——它会忽略后续 JS 动态修改的min/max，导致拖动越界或卡死 - 移动端 thumb 尺寸必须 ≥ 44×44px，否则 iOS Safari 触摸响应迟钝；可用
tooltip_position: 'top'避免遮挡 - 若项目已用 Bootstrap 5.3+，注意
bootstrap-slider默认仍基于 Bootstrap 4 的 class 命名，需手动覆盖.slider-selection等样式以匹配新主题色
自己用 input[type="range"] 实现范围滑块的硬伤
纯原生方案看似轻量，但实际踩坑密集：双滑块需两个 input + 手动同步边界（左滑块不能超右值，右不能低于左），且 Safari 下 input 事件在快速拖拽时丢失，导致 UI 和状态不同步。
- 常见错误：
oninput回调里直接改另一个input.value，触发其input事件，形成循环调用 → 报RangeError: Maximum call stack size exceeded - 响应式失效主因：容器
width变化时，clip-path: inset(0 0 0 X%)的百分比基准没重算，右侧图裁剪错位；必须监听resize并手动更新style.clipPath - 图片对比类场景慎用
clip-path：iOS 16 Safari 渲染延迟明显，降级用overflow: hidden+width控制更稳
BootstrapBlazor 的 Slider 在 Blazor 场景下更干净
如果你用的是 Blazor Server/WASM，BootstrapBlazor.Components.Slider 是更自然的选择——它原生支持 @bind-Value="int[]" 绑定，IsRange="true" 即启用双滑块，无需 DOM 操作或事件胶水代码。
-
Step参数对范围滑块生效方式特殊：它约束的是左右值各自的步进，但不保证两值差值是Step的整数倍，需自行校验 - 自定义轨道颜色不能靠 CSS 覆盖
::-webkit-slider-runnable-track，得用TrackClass参数注入 class，再写对应 CSS - SSR（服务端渲染）下首次加载时，
ShowValue="true"可能导致服务端与客户端值不一致，建议设ValueFormat显式格式化
真正难的不是让滑块动起来，而是让左右两个值在各种缩放、旋转、动态重置场景下始终互斥且可预测。别省那几 KB 的 JS，用经过验证的 bootstrap-slider 或 BootstrapBlazor，比手搓兼容性补丁快得多。
