nouislider 初始化必须先创建dom容器并确保可见，再配置range、start、connect三项必要参数；样式通过覆盖内置class实现；事件需用on()方法绑定，不支持原生addeventlistener。
noUiSlider 本身不依赖 HTML 结构，直接用 JavaScript 初始化即可；所谓“利用 HTML”其实是误解——你得手动创建容器元素，再用 JS 绑定，否则滑块根本不会渲染。
初始化前必须准备一个空的 DOM 容器
noUiSlider 不会自动创建 <div>，它只接管已有节点。常见错误是直接调用 <code>nouislider.create() 却没在页面中放对应元素，结果控制台报错 Cannot read property 'appendChild' of null 或静默失败。
- HTML 中必须显式写一个空容器：
<div id="slider"></div>
- ID 名要和 JS 中选择器一致，比如用
document.getElementById('slider')或document.querySelector('#slider') - 别给容器设
display: none或父级隐藏，否则尺寸计算异常，拖动失效
range、start、connect 这三个配置项决定基础行为
它们不是可选项，而是滑块能否正常工作的最小配置集合。漏掉任意一个，noUiSlider.create() 会抛出明确错误，例如 Range is required。
-
range必须是对象，如{ min: 0, max: 100 }或带中间值{ min: 0, '50%': 50, max: 100 } -
start值必须落在range.min和range.max之间，且格式要匹配：单值（50）生成单滑块，数组（[20, 80]）生成双滑块 -
connect控制填充色显示方式：布尔值true/false用于单滑块；数组如[true, false, true]用于双滑块（表示 min–value1、value1–value2、value2–max 三段的连接状态）
自定义样式靠 CSS 类名 + noUiSlider 内置 class 体系
noUiSlider 在容器上添加固定 class（如 noUi-base、noUi-handle），不支持传入 className 配置。想改颜色、大小、手柄形状，只能覆盖这些 class 的 CSS。
- 关键类名有：
noUi-target（最外层）、noUi-connects（填充区父容器）、noUi-connect（每段填充）、noUi-handle（拖动手柄）、noUi-tooltip（tooltip） - 修改手柄尺寸时，注意同步调整
transform: translate(-50%, -50%)的偏移逻辑，否则定位偏移 - 如果用了
orientation: 'vertical'，所有方向相关 CSS（如top/left）要切换成bottom/right，且需额外设容器高度
绑定事件要用 on() 方法，不能靠 addEventListener
noUiSlider 的事件系统是内部实现的，不触发原生 DOM 事件。试图用 sliderElement.addEventListener('change', ...) 完全无效。
- 正确方式是调用实例的
on()方法：slider.noUiSlider.on('update', (values, handle) => {...}) - 常用事件包括：
update（数值变化时，含格式化后的字符串数组）、change（结束拖动后触发一次）、set（程序调用set()时）、slide（拖动中实时触发） - 获取原始数字值得自己转：
parseFloat(values[handle])；双滑块时handle是索引（0 或 1）
真正麻烦的不是初始化，而是当你要支持键盘操作、无障碍读取、多语言格式化或与表单控件双向同步时——这些 noUiSlider 都不内置，得自己补 event listener、aria- 属性、input 同步逻辑，而且很容易在 resize 或动态销毁重建时漏掉清理。
