滑块拖动时background-color不变是因为CSS变量名漏写双短横线，如'--bg-hue'写成'bg-hue'；应使用document.documentElement.style.setProperty('--bg-hue', value)并配合hsl()和input事件实现流畅实时变色。
滑块拖动时 background-color 不变？先查 setProperty 的变量名格式
最常见的失效原因是 CSS 变量名漏写双短横线。比如在 CSS 里定义了 --bg-hue，但 JS 中写成 document.documentElement.style.setProperty('bg-hue', value) —— 这个变量根本不会被识别，浏览器静默忽略。
必须严格匹配：CSS 中用 :root { --bg-hue: 0; }，JS 中调用 setProperty('--bg-hue', value)。别试图用 element.style.--bg-hue = value，这语法直接报错。
验证方法：打开开发者工具 → Elements → <html> 标签 → Styles 面板，看是否出现 style="—bg-hue: 120;" 这样的内联声明。没有就说明 setProperty 没生效。
为什么推荐用 hsl() 而不是 rgb() 或 #hex？
HSL 的 h（色相）是 0–360 的连续数值，和 <input type="range"> 的默认范围天然对齐；RGB 或 HEX 是离散值或字符串，每次变动都要做颜色空间转换，既慢又容易出错。
立即学习“前端免费学习笔记（深入）”；
实操建议：
<input type="range" min="0" max="360" value="0">- CSS 中写
background-color: hsl(var(--bg-hue), 80%, 60%); - 若要控制饱和度或亮度，再加两个变量：
--bg-sat、--bg-light，同样走hsl()组合
input 事件 vs change 事件：选哪个？
用 input。它在拖动过程中持续触发（每像素一次），配合 CSS 变量更新，视觉上就是实时的；change 只在松手后触发一次，体验明显卡顿。
注意点：
- 别在
input回调里反复查 DOM，例如document.querySelector(...)或getComputedStyle() - 避免做复杂计算，比如每次都在里面算对比度、反色等 —— 提前抽成独立函数，回调里只负责赋值
- 频繁触发
input不会卡 UI，因为只是改一个 CSS 变量，浏览器会合并渲染
移动端滑块拖不动？检查 touch-action
某些全局重置样式（如 normalize.css）或自定义 CSS 可能设置了 touch-action: none，导致 iOS / Android 上滑块完全无响应。
快速修复：
- 给滑块元素加
style="touch-action: auto;"或touch-action: manipulation; - 用 Chrome / Safari 开发者工具的 Rendering 面板勾选 “Paint flashing”，确认拖动时是否有重绘
- 真机测试优先，桌面模拟器的触摸行为不可靠
最容易被忽略的是作用域问题：如果页面用了 Shadow DOM，document.documentElement 改不到组件内部样式，得换成 shadowRoot.host 或直接操作目标元素的 style。
