滑块拖动时颜色不变，90%是因为setproperty变量名漏写双短横线（如'bg-hue'而非'--bg-hue'），且应使用input事件（实时触发）而非change事件（仅松手后触发），配合hsl()与css变量实现平滑变色。
滑块拖动时颜色不变，90% 是因为 setProperty 传入的变量名漏了双短横线（--），比如写成 'bg-hue' 而不是 '--bg-hue' —— 浏览器直接忽略，不报错也不生效。
为什么用 input 事件而不是 change
滑块在拖动过程中需要每像素都更新一次颜色，input 事件天然支持这个行为；change 只在松手后触发一次，视觉上就是“卡顿一跳”。
- 移动端尤其明显：iOS Safari 的
change甚至可能延迟数百毫秒 -
input频繁触发不卡 UI，因为只是改一个 CSS 变量，浏览器会合并渲染 - 别在
input回调里反复调用document.querySelector()或getComputedStyle()，提前缓存引用
hsl() 为什么比 rgb() 或 #hex 更适合滑块控制
HSL 的色相（h）是 0–360 的连续数值，和 <input type="range" min="0" max="360"> 天然对齐；RGB/HEX 是离散值或字符串，每次都要做颜色空间转换，既慢又容易出错。
- CSS 中写
background-color: hsl(var(--bg-hue), 80%, 60%) - 若还需调节饱和度或亮度，加两个变量：
--bg-sat、--bg-light，同样走hsl()组合 - 避免在 JS 里拼接 HEX 字符串（如
'#' + r.toString(16)），易出错且无过渡动画
如何验证 setProperty 是否真正生效
打开开发者工具 → Elements → 点击 标签 → Styles 面板，看是否出现类似 style="--bg-hue: 120;" 的内联声明。没有就说明 JS 没写对。
- 必须用
document.documentElement.style.setProperty('--bg-hue', value)，不能用element.style.--bg-hue = value（语法错误） - 变量必须在
:root中定义，例如:root { --bg-hue: 0; } - 目标元素样式中必须用
var(--bg-hue)引用，不能被!important或内联style覆盖 - 移动端若拖不动，检查是否全局设置了
touch-action: none，给滑块加style="touch-action: auto;"
最容易被忽略的是作用域：如果页面用了 Shadow DOM，document.documentElement 改的是全局根，而组件内部可能需要改其 shadowRoot.host 的 style —— 这时候得单独处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
