原生 是唯一语义正确且无障碍友好的起点，必须显式声明 min、max、value 和 step 四属性，css 覆盖需谨慎处理跨浏览器伪元素差异，双滑块须用两个 range + js 同步，nouislider 仅接管空容器节点，不解析 html 结构。
原生 <input type="range"> 是唯一语义正确且无障碍友好的起点
别跳过它去手写拖拽逻辑——那会直接丢失键盘支持（arrow/home/end）、屏幕阅读器识别、表单自动校验和移动端原生触控反馈。所有“高度定制”都必须基于它展开，而不是绕开它。
基础结构只有一行，但四个属性缺一不可：
-
min和max必须显式声明，否则默认 0–100，而音量、不透明度等场景常需 0–1 或小数范围 -
value初始值取min（不是 0），不设时容易误判为空 -
step设为"any"也不代表真能滑任意精度，iOS Safari 仍受硬件采样限制；若需小数，建议配合event.target.valueAsNumber读值，避免parseInt引入浮点误差
CSS 覆盖默认样式时，track 和 thumb 必须分别处理
原生 range 滑块在不同浏览器里渲染结构不同（Chrome 用 ::-webkit-slider-runnable-track，Firefox 用 ::track 和 ::thumb，Safari 更麻烦），强行统一外观容易漏掉某一边的 thumb 或 track 导致“滑块消失”或“拖不动”。
避坑建议：
- 先用
-webkit-appearance: none清除默认样式，但注意：Safari iOS 15.4 之前完全忽略该声明，且清除后轨道和滑块会变不可见——不是美化失败，是被清空了，必须手动重绘 -
thumb伪元素不能设display: block，否则 Safari 中直接消失 - 给
input[type="range"]设宽高只影响thumb，不影响轨道长度；轨道宽度由父容器决定 - 用
background: linear-gradient()做渐变轨道时，Firefox 会把渐变拉伸到整个轨道，Chrome 则按实际填充比例渲染，行为不一致
双滑块范围选择器必须用两个 <input type="range"> + JS 同步约束
HTML 原生不支持双滑块（如“15–80”区间），<input type="range"> 只提供单值控制。所谓“一行实现”全是误导。
实操关键不是让它们“看起来像一个”，而是行为符合范围语义：
- 两个
input共享相同min、max和step，但用不同id（如id="min-slider"和id="max-slider"） - 监听双方的
input事件（不是change），因为要实时响应拖动 - 每次更新时强制校验：
minSlider.value = Math.min(minSlider.value, maxSlider.value)，反之亦然 - 为避免抖动，更新对方值后需用标志位防递归触发，或调用
event.preventDefault()
noUiSlider 不是“HTML 库”，它根本不管 HTML 结构
名字带“HTML”是常见误解。noUiSlider 本身不依赖任何 HTML 标签，也不解析 DOM 结构——它只接管一个已存在的空容器节点。没这个节点，nouislider.create() 直接报错 Cannot read property 'appendChild' of null 或静默失败。
初始化前必须手动准备：
- HTML 中显式写一个空容器：
<div id="slider"></div> - ID 名必须与 JS 中选择器严格一致（如
document.getElementById('slider')） - 容器不能有
display: none或被父级隐藏，否则尺寸计算异常，拖动失效 -
range、start、connect是最小必要配置：漏掉任意一个，create()会抛出明确错误（如Range is required） - 样式只能靠覆盖内置 class（如
noUi-handle、noUi-connect），不支持传入自定义 class 名
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
