← 全部文章

操作类型

SLIDER：标签页里的 CSS 变量控制器 —— 亮度、缩放、字号触手可及

15 5月 2026 · 作者 JustZix Team

JS 擅长「做 X」。CSS 擅长「永远显示成 Y」。那当你想要「实时连续地调节 Y」的时候 —— 因为你在寻找页面完美的亮度、最适合你视力的字号，或者在同一个标签页里测试缩放级别？那就用 SLIDER（自 v2.13.19）—— JustZix 动作栏里一个原生的 <input type="range">，每次值改变都会运行 JS 代码。

SLIDER 解剖 —— 4 个部分 + 4 种独立颜色

动作栏里的一个 SLIDER 是一个 wrap div，带三个子元素：label（左）、<input type="range">（中）、值显示（右）。每个部分有自己的颜色（自 v2.13.19 —— 细粒度取色器）：

// 动作属性 → CSS 效果
color           → 整个 wrap 的背景
colorText       → 滑块的 accent-color（进度条填充）
colorLabel      → label 的文字颜色（左侧）
colorValue      → 当前值的文字颜色（右侧）

// 范围定义
min: 0          // 默认 0
max: 100        // 默认 100
step: 1         // 默认 1
defaultValue: 50  // 可选 —— 回退到 (min+max)/2
unit: '%'       // 可选 —— 附加到值显示上

使用场景：一个「亮度」滑块 50-150% 可以有紫色背景（color）、白色滑块填充（colorText）、浅灰色的「亮度」label（colorLabel）、黄色的「100%」值（colorValue）。4 种颜色 = 4 个独立的对比层级，每个都有自己的任务。

两个事件：input vs change —— 关键区别

SLIDER 只在 change（鼠标松开后）时执行「Code」字段的 JS，而不在 input（实时拖动）时执行。这是有意的，能省下性能：

没有这个 —— 从 0 拖到 100 会执行代码 101 次，每次都带一次 CSS 回流。卡顿和抖动。有了它 —— 拖动是免费的，松手才执行一次。如果你确实想要实时更新（例如一个需要 60fps 响应的 CSS 变量），用 colorValue + 一个由 JS 以防抖模式更新的 CSS 变量。

使用场景 1 —— 任意页面的亮度控制器

网站在黑夜里太亮了。深色模式是「全有或全无」。一个滑块给你 50-150% 的精确控制：

// SLIDER 动作「亮度」
min: 50, max: 150, step: 5, defaultValue: 100, unit: '%'

// 代码（value 是 Number）：
document.documentElement.style.filter = `brightness(${value}%)`;
JUSTZIX.log(`亮度 → ${value}%`);

拖动 → 通过 refreshValueDisplay 实时反馈（「105%」）；松手 → 应用 CSS 滤镜。下次在这个域名上，滑块会记住值。深夜阅读 —— 65%，清晨 —— 90%，中午 —— 110%。

使用场景 2 —— 字号滑块（无障碍）

一个老网站硬编码了字号：11px。浏览器缩放会把一切都放大（导航溢出）。一个滑块：

// SLIDER 动作「字体」
min: 12, max: 24, step: 1, defaultValue: 16, unit: 'px'

// 代码：
document.documentElement.style.setProperty('--base-font-size', value + 'px');
document.querySelectorAll('p, li, span, td, div').forEach(el => {
  el.style.fontSize = value + 'px';
});

再加上另一个窗口里的一条 CSS 规则：html { font-size: var(--base-font-size); }。滑块只驱动基准 —— 基于 rem 的比例关系保持不变。对那些不尊重浏览器缩放的网站很有用。

使用场景 3 —— 节流动画速度（调试）

调试一段复杂的 CSS 动画。1× 下太快了，在 DevTools 里逐帧会丢失节奏。一个滑块：

// SLIDER 动作「Anim speed」
min: 1, max: 20, step: 1, defaultValue: 10, unit: '/10'

// 代码：
const factor = 10 / value;  // value 10 = 1×, value 1 = 慢 10×, value 20 = 快 2×
document.querySelectorAll('*').forEach(el => {
  el.style.animationDuration = (factor) + 's';
  el.style.transitionDuration = (factor * 0.3) + 's';
});
JUSTZIX.log(`动画速度系数: ${factor}x`);

拖到 1 = 慢 10×，看清每一帧。拖到 20 = 快 2×，检查快速路径。无需 Chrome DevTools 的「rendering」面板。

使用场景 4 —— 从另一个动作程序化更新

滑块的值可通过 JZ.value('亮度') 获取（从 wrap.dataset.jzValue 返回一个字符串），可通过 JZ.setValue('亮度', 100) 写入 —— 它会派发 input + change 事件，所以代码会照常运行：

// 在另一个 BUTTON 动作「Reset all」里：
JZ.setValue('亮度',     100);   // → CSS 滤镜 brightness(100%)
JZ.setValue('字体',     16);    // → 重置字号
JZ.setValue('Anim speed', 10);  // → 重置动画速度
JUSTZIX.log('所有滑块已恢复默认值。');

JZ.setValue 把值赋给 input.value + 派发 input + 派发 change —— 和手动拖动一样的流程。没有这个修复（v2.13.33），滑块会有 dataset.jzValue === null，程序化更新就不会执行代码。

坑

• 上下文里的 value 是 Number，不是 String（不同于 INPUT/SELECT）。你可以做数学运算而无需 parseFloat()。但注意：对于字符串拼接（例如 el.style.width = value + 'px'）JS 会自动强制转换，所以它能工作。
• 默认值取 (min+max)/2，在你忘了 defaultValue 时是个合理的兜底。范围 0-100 → 50；50-150 → 100。但对非线性范围（例如缩放 10-200）这个默认值可能离自然的「100%」很远。
• colorText 不是文字颜色（对滑块而言，自 v2.13.19）。它是进度条的填充颜色（accent-color）。左/右的文字用 colorLabel / colorValue。BUTTON 时代的旧代码可能会搞混 —— 在 SLIDER 里 colorText 是「填充」，在其他类型里它是「文字」。
• memory 会被钳制到范围内。如果你后来改了 min/max，超出新范围的已保存 memory 会被钳制。没有错误 —— 滑块只是跳到最近的端点。
• 拖动会阻止动作栏被拖动（在 mousedown + touchstart 上 stopPropagation），这样你抓滑块时不会意外拖动整条栏。

接下来做什么

SLIDER 是标签页里的「物理推子」—— 零开销、原生 <input>、混合式 memory。它和 window.JZ 辅助函数（JZ.setValue 做程序化控制）以及 TOGGLE3 完美搭配做快速预设（「Bright」/「Normal」/「Dim」预设通过 JZ.setValue 把滑块设为 130/100/70）。

安装 JustZix，30 秒内构建你的第一个 SLIDER。