← All posts

Action types

SLIDER: a CSS variable controller inside the tab — brightness, zoom, font-size at your fingertips

15 May 2026 · by JustZix Team

JS is great for "do X". CSS is great for "always look like Y". What if you want "smoothly tune Y in real-time" — because you're hunting for the perfect page brightness, the optimal font-size for your eyesight, or testing zoom levels in one tab? Then you use a SLIDER (since v2.13.19) — a native <input type="range"> in the JustZix action bar with JS code firing on every value change.

Anatomy of a SLIDER — 4 parts + 4 separate colours

A SLIDER in the action bar is a wrap div with three children: label (left), <input type="range"> (middle), value display (right). Each part has its own colour (since v2.13.19 — granular colour picker):

// Action property → CSS effect
color           → background of the entire wrap
colorText       → accent-color of the slider (the fill of the bar)
colorLabel      → text-color of the label (left side)
colorValue      → text-color of the current value (right side)

// Range definition
min: 0          // default 0
max: 100        // default 100
step: 1         // default 1
defaultValue: 50  // optional — falls back to (min+max)/2
unit: '%'       // optional — appended to value display

Use case: a "Brightness" slider 50-150% can have a purple background (color), white slider fill (colorText), a light-grey "Brightness" label (colorLabel), a yellow "100%" value (colorValue). 4 colours = 4 separate contrast tiers, each one with a job.

Two events: input vs change — the key difference

SLIDER fires the "Code" field JS only on change (after mouse release), not on input (live drag). This is intentional and saves performance:

Without this — dragging from 0 to 100 would fire code 101 times, each one with a CSS reflow. Jank and jitter. With this — drag is free, fire-once on release. If you do want live-update (e.g. a CSS variable that needs 60fps reactivity), use colorValue + a CSS variable updated by JS in debounced mode.

Use case 1 — Brightness controller for any page

Sites are too bright on a dark night. Dark mode is "all-or-nothing". A slider gives precise 50-150% control:

// Action SLIDER "Brightness"
min: 50, max: 150, step: 5, defaultValue: 100, unit: '%'

// Code (value is a Number):
document.documentElement.style.filter = `brightness(${value}%)`;
JUSTZIX.log(`Brightness → ${value}%`);

Drag → live feedback via refreshValueDisplay ("105%"); release → CSS filter applied. Next time on this domain, the slider remembers the value. Late-night reading — 65%, early morning — 90%, midday — 110%.

Use case 2 — Font-size slider (accessibility)

An old site with a hardcoded font-size: 11px. Browser zoom scales everything (navigation overflows). A slider:

// Action SLIDER "Font"
min: 12, max: 24, step: 1, defaultValue: 16, unit: 'px'

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

Plus a CSS rule in another window: html { font-size: var(--base-font-size); }. Slider drives only the base — rem-based proportions remain. Useful for sites that don't respect browser zoom.

Use case 3 — Animation speed throttle (debug)

Debugging a complex CSS animation. 1× is too fast, step-by-step in DevTools loses the flow. A slider:

// Action SLIDER "Anim speed"
min: 1, max: 20, step: 1, defaultValue: 10, unit: '/10'

// Code:
const factor = 10 / value;  // value 10 = 1×, value 1 = 10× slower, value 20 = 2× faster
document.querySelectorAll('*').forEach(el => {
  el.style.animationDuration = (factor) + 's';
  el.style.transitionDuration = (factor * 0.3) + 's';
});
JUSTZIX.log(`Anim speed factor: ${factor}x`);

Drag to 1 = 10× slower, you see every frame. Drag to 20 = 2× faster, verify fast paths. Without Chrome DevTools "rendering" panel.

Use case 4 — Programmatic update from another action

Slider value is available via JZ.value('Brightness') (returns a string from wrap.dataset.jzValue) and writable via JZ.setValue('Brightness', 100) — which dispatches input + change events, so the code fires normally:

// In another BUTTON action "Reset all":
JZ.setValue('Brightness', 100);     // → CSS filter brightness(100%)
JZ.setValue('Font',       16);      // → reset font-size
JZ.setValue('Anim speed', 10);      // → reset animation speed
JUSTZIX.log('All sliders reset to defaults.');

JZ.setValue assigns the value to input.value + dispatches input + dispatches change — the same flow as a manual drag. Without this fix (v2.13.33) the slider would have dataset.jzValue === null and programmatic update wouldn't fire the code.

Pitfalls

• The value in context is a Number, not a String (unlike INPUT/SELECT). You can do math operations without parseFloat(). But careful: for string concat (e.g. el.style.width = value + 'px') JS auto-coerces, so it works.
• Default as (min+max)/2 is a sane fallback if you forget defaultValue. With range 0-100 → 50; with 50-150 → 100. But for non-linear ranges (e.g. zoom 10-200) this default might be far from a "natural" 100%.
• colorText is NOT the text colour for a slider (since v2.13.19). It's the fill colour of the bar (accent-color). Left/right text uses colorLabel / colorValue. Older code from the BUTTON era might be confusing — in SLIDER colorText is "fill", in other types it's "text".
• Memory clamps to range. If you change min/max later, stored memory beyond the new range will be clamped. There's no error — the slider just snaps to the nearest endpoint.
• Drag blocks dragging the action bar (mousedown + touchstart stopPropagation), so you don't accidentally drag the whole bar while grabbing the slider.

What's next

SLIDER is a "physical fader" in the tab — zero overhead, native <input>, hybrid memory. It pairs beautifully with window.JZ helpers (JZ.setValue for programmatic control) and with TOGGLE3 for quick presets ("Bright" / "Normal" / "Dim" presets that set the slider to 130/100/70 via JZ.setValue).

Install JustZix and build your first SLIDER in 30 seconds.