← Wszystkie wpisy

Typy akcji

SLIDER: kontroler CSS variables wewnątrz karty — jasność, zoom, font-size z palca

15 maja 2026 · autor JustZix Team

JS jest świetne dla "zrób X". CSS jest świetne dla "zawsze wyglądaj jak Y". A co kiedy chcesz "płynnie kręcić Y w czasie rzeczywistym" — bo szukasz idealnej jasności strony, optymalnego font-size dla wzroku, czy testujesz różne stopnie zoom w jednej karcie? Wtedy używasz SLIDER (od v2.13.19) — natywnego <input type="range"> w pasku akcji JustZix z kodem JS odpalanym przy każdej zmianie wartości.

Anatomia SLIDER'a — 4 części + 4 osobne kolory

SLIDER w pasku akcji to wrap div z trzema dziećmi: label (lewa), <input type="range"> (środek), value display (prawa). Każda część ma własny kolor (od v2.13.19 — granularny color picker):

// Action property → CSS effect
color           → background tła całego wrap'a
colorText       → accent-color slidera (fill paska)
colorLabel      → text-color dla labela (lewa strona)
colorValue      → text-color dla aktualnej wartości (prawa strona)

// Definicja zakresu
min: 0          // default 0
max: 100        // default 100
step: 1         // default 1
defaultValue: 50  // optional — fallback do (min+max)/2
unit: '%'       // optional — dopisany do value display

Use case: slider "Jasność" 50-150% może mieć tło fioletowe (color), fill suwaka biały (colorText), label "Brightness" jasnoszary (colorLabel), value "100%" żółty (colorValue). 4 kolory = 4 osobne stopnie kontrastu, gdzie każdy ma swoją funkcję.

Dwa eventy: input vs change — kluczowa różnica

SLIDER odpala JS code w polu "Code" tylko na change (po release przycisku myszy), nie na input (live drag). To celowe i ratuje wydajność:

Bez tego — drag od 0 do 100 odpalał by code 101 razy, każdy z reflow CSS. Brzęczki i jank. Z tym — drag jest darmowy, fire-once na release. Jeśli akurat chcesz live-update (np. CSS variable który wymaga 60fps reactivity), używaj colorValue + CSS variable updated przez JS w trybie debounce.

Use case 1 — Brightness controller dla każdej strony

Strony są zbyt jasne ciemną nocą. Dark mode jest "albo / albo". Slider daje precyzyjną kontrolę 50-150%:

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

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

Drag → live-feedback dzięki refreshValueDisplay ("105%"); release → CSS filter aplikowany. Następnym razem na tej domenie slider pamięta wartość. Sleep mode na środku nocy — 65%, wczesny ranek — 90%, południe — 110%.

Use case 2 — Font-size slider (accessibility)

Stara strona z hardcoded font-size: 11px. Zoom przeglądarki = przeskaluj wszystko (overflows nawigacji). 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 CSS rule w innym oknie: html { font-size: var(--base-font-size); }. Slider steruje tylko base — proporcje rem-based zostają. Pomocne dla stron które nie respektują browser zoom.

Use case 3 — Animation speed throttle (debug)

Debugowanie skomplikowanej animacji CSS. Przy 1× za szybko, krok-po-kroku w DevTools się traci flow. 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× wolniej, value 20 = 2× szybciej
document.querySelectorAll('*').forEach(el => {
  el.style.animationDuration = (factor) + 's';
  el.style.transitionDuration = (factor * 0.3) + 's';
});
JUSTZIX.log(`Anim speed factor: ${factor}x`);

Drag do 1 = 10× wolniej, widzisz każdy frame. Drag do 20 = 2× szybciej, weryfikujesz fast-paths. Bez Chrome DevTools "rendering" panela.

Use case 4 — Programmatic update z innej akcji

Slider value jest dostępne przez JZ.value('Brightness') (zwraca string z wrap.dataset.jzValue) i pisalne przez JZ.setValue('Brightness', 100) — co dispatchuje input + change events, więc code odpala się normalnie:

// W innej akcji BUTTON "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 podstawia value do input.value + dispatch input event + dispatch change event — czyli ten sam flow co manualny drag. Bez tego fix'a (v2.13.33) slider miałby dataset.jzValue === null i programmatic update nie odpaliłby kodu.

Pułapki

• value w context jest Number, nie String (jak w INPUT/SELECT). Możesz robić matematyczne operacje bez parseFloat(). Ale uwaga: dla string concat (np. el.style.width = value + 'px') JS auto-coerce'uje, więc działa.
• Default jako (min+max)/2 jest sane fallback'em jeśli zapomniałeś defaultValue. Z range 0-100 → 50; z 50-150 → 100. Ale dla nielinearnych zakresów (np. zoom 10-200) ten default może być daleki od "natural" 100%.
• colorText to NIE jest kolor tekstu dla slidera (od v2.13.19). To kolor wypełnienia paska (accent-color). Tekst lewa/prawa to colorLabel / colorValue. Stary code z czasów BUTTON może być confusing — w SLIDER colorText jest "fill", w pozostałych typach to "text".
• Memory clamp do range. Jeśli zmienisz min/max po latach, stara memory poza nowym zakresem zostanie clampnięta. Nie ma error'a — slider po prostu skacze do najbliższego endpoint'a.
• Drag blokuje przeciąganie bara akcji (mousedown + touchstart stopPropagation), tak żeby nie próbować przeciągnąć całego bar'a kiedy chwytasz slider.

Co dalej

SLIDER to "fizyczny kontroler" w karcie — zero overhead, natywny <input>, hybrid memory. Łączy się świetnie z window.JZ helpers (JZ.setValue dla programmatic sterowania) oraz z TOGGLE3 dla quick presets ("Bright" / "Normal" / "Dim" presety, które ustawiają slider na 130/100/70 przez JZ.setValue).

Zainstaluj JustZix i zbuduj swój pierwszy SLIDER w 30 sekund.