应统一用__range表示双滑块选中区间，__track仅用于单滑块背景轨道；左右滑块须用__thumb--min和__thumb--max区分，不可依赖DOM顺序或--left/--right；__range需JS动态控制left/width并设绝对定位与z-index层级。
双滑块 Slider 的 BEM 命名该用 __track 还是 __range？
直接说结论：BEM 中不推荐用 __track 表示可拖动的区间，它容易和单滑块的轨道（track）混淆；应统一用 __range 表示两个滑块之间的选中区间。这是语义优先的判断——__range 明确表达“范围”，而 __track 在原生 中指整个不可交互的背景条，不是双滑块特有的视觉区域。
常见错误是把区间当作“轨道的一部分”，结果导致样式复用混乱，比如给 __track 加了渐变色后，单滑块组件也意外染上同款样式。
-
__range只用于双滑块场景，专指两个__thumb之间高亮/填充的区域 - 单滑块仍保留
__track（表示背景轨道），与__range完全隔离 - 若需兼容单/双模式，建议用修饰符区分：
slider--dual下才渲染__range
slider__thumb 需要加修饰符区分左右吗？
需要。双滑块必须能独立控制左右 thumb 的位置、z-index 和激活态，否则会出现拖拽冲突或视觉遮盖。BEM 不靠 DOM 顺序或 CSS 伪类定位，而是靠明确的修饰符。
典型错误是只写一个 slider__thumb，再用 :nth-child(1) 和 :nth-child(2) 区分左右——这违反 BEM 的“可预测性”原则，一旦 DOM 结构微调（比如加了提示气泡 wrapper），样式就失效。
- 左滑块用
slider__thumb--min，右滑块用slider__thumb--max - 对应 JS 中绑定事件时，也按 class 名精确获取节点，避免依赖索引
- 不要用
--left/--right，因为 RTL 场景下左右会翻转；--min/--max是数据语义，稳定可靠
如何让 slider__range 正确撑开并响应滑块移动？
纯 CSS 无法动态计算双滑块间距，必须靠 JS 更新 slider__range 的 left 和 width。BEM 只管结构命名，但样式实现得配合 JS 输出的内联 style 或 data 属性。
常见坑是把 range 写成绝对定位后忘了设 transform: translateZ(0)，导致在 Safari 上出现重绘撕裂；或者 width 计算用了百分比但没考虑 thumb 半宽，造成区间末端漏出像素。
- JS 计算 width 公式：
maxPos - minPos（单位为 %），再减去一个thumb的半宽（防止遮盖） - range 必须设
position: absolute+top: 50%+transform: translateY(-50%)对齐轨道中线 - 为防 Safari 渲染异常，加
will-change: left, width或transform: translateZ(0)
为什么不能把双滑块封装成 slider--dual 就完事？
因为 slider--dual 只是外层修饰符，它不解决内部元素职责模糊的问题。如果所有子元素都只依赖这个修饰符（比如写 .slider--dual .slider__thumb），就会丧失 BEM 的模块化优势——你无法单独复用 slider__range，也无法在其他组件里安全嵌入双滑块逻辑。
真正关键的是原子级命名的一致性：只要存在双滑块行为，就必然有 __range、__thumb--min、__thumb--max 三者共存，且彼此无隐式依赖。哪怕换一套 UI 框架，这套命名也能平移过去。
最易被忽略的点是：range 的 z-index 必须严格介于两个 thumb 之间（比如 thumb--min: 3, range: 2, thumb--max: 1），否则拖动时会出现视觉跳变——这个细节不会体现在 BEM 类名里，但必须写死在 CSS 中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
