用两个原生range滑块分别控制亮度（0–100）和色温（2700–6500K），通过CSS变量绑定样式，配合input事件实时更新，并用查表法将色温转HSL，同时设置touch-action: none防移动端干扰。
用 <input type="range"> 实现亮度/色温双滑块控制
HTML 本身不提供“灯光面板”这种业务组件，但能快速搭出可交互的调节骨架。核心是两个 <input type="range">：一个控亮度（0–100），一个控色温（2700–6500K）。不要用 <input type="number"> 或自定义拖拽——原生 range 兼容性好、语义清晰、移动端触控反馈自然。
关键细节：
- 给每个
<input>加min、max、step和value初始值，比如色温用step="100"避免滑动太碎 - 必须加
aria-label（如aria-label="亮度调节"），否则屏幕阅读器无法识别用途 - 别依赖
onchange监听——它只在松手时触发；要用input事件实时响应滑动过程
用 CSS 变量 + style.setProperty() 同步更新 DOM 样式
灯光效果最终要映射到页面元素上，比如一个模拟灯罩的 <div class="lamp">。直接操作内联样式或 class 切换容易失控，推荐用 CSS 自定义变量统一管理：
:root {
--brightness: 1;
--color-temp: 4000;
}
<p>.lamp {
background: hsl(var(--color-temp), 20%, calc(50% * var(--brightness)));
filter: brightness(var(--brightness));
}JavaScript 中只需更新变量值：
立即学习“前端免费学习笔记（深入）”；
document.documentElement.style.setProperty('--brightness', brightnessValue / 100);
document.documentElement.style.setProperty('--color-temp', colorTempValue);这样比反复拼接 style.backgroundColor 更可靠，也方便后续扩展（比如加过渡动画）。
色温转 HSL 的坑：浏览器不支持 color-temperature 函数
很多人以为 CSS 里能直接写 background: color-temperature(4000K) ——目前所有浏览器都不支持。必须手动把色温（开尔文值）转成 HSL 或 RGB。简单方案是查表插值，比如：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 2700K →
hsl(20, 100%, 50%)（暖黄） - 4000K →
hsl(45, 30%, 60%)（中性白） - 6500K →
hsl(60, 10%, 85%)（冷白）
别硬套黑体辐射公式（Planckian locus），日常面板够用即可。若需高精度，用现成库如 kelvin-to-rgb，但注意它返回的是 RGB 数组，得再转成 HSL 才能和 --brightness 融合。
移动端 touch 事件干扰 range 滑动？禁掉默认行为
在 iOS Safari 或部分安卓 WebView 中，手指快速滑动 <input type="range"> 可能触发页面滚动或缩放，导致滑块跳变。不是 bug，是浏览器对 touchstart 的默认响应。
解决方法很简单，在滑块父容器加：
<div class="panel" style="touch-action: none;"> <input type="range" ...> </div>
或者用 JS 绑定：
document.querySelector('.panel').addEventListener('touchstart', e => e.preventDefault(), { passive: false });注意：只对包含滑块的容器设 touch-action: none，别全局加，否则影响页面其他手势。
真实项目里最常被忽略的是色温映射的非线性——人眼对 3000K 到 4000K 的变化比 5000K 到 6000K 敏感得多，所以滑块的 step 和视觉反馈最好做对数映射，而不是均分刻度。
