用两个原生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 自定义变量统一管理：<pre class="brush:php;toolbar:false;">:root {
--brightness: 1;
--color-temp: 4000;
}
<p>.lamp {
background: hsl(var(--color-temp), 20%, calc(50% * var(--brightness)));
filter: brightness(var(--brightness));
}</p></pre>
<p>JavaScript 中只需更新变量值：</p>
<pre class="brush:php;toolbar:false;">document.documentElement.style.setProperty('--brightness', brightnessValue / 100);
document.documentElement.style.setProperty('--color-temp', colorTempValue);</pre>
<p>这样比反复拼接 <code>style.backgroundColor 更可靠，也方便后续扩展（比如加过渡动画）。
色温转 HSL 的坑：浏览器不支持 color-temperature 函数
很多人以为 CSS 里能直接写 background: color-temperature(4000K) ——目前所有浏览器都不支持。必须手动把色温（开尔文值）转成 HSL 或 RGB。简单方案是查表插值，比如：
- 2700K →
hsl(20, 100%, 50%)（暖黄） - 4000K →
hsl(45, 30%, 60%)（中性白） - 6500K →
hsl(60, 10%, 85%)（冷白）
别硬套黑体辐射公式（Planckian locus），日常面板够用即可。若需高精度，用现成库如 kelvin-to-rgb，但注意它返回的是 RGB 数组，得再转成 HSL 才能和 --brightness 融合。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
移动端 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 和视觉反馈最好做对数映射，而不是均分刻度。
