← Tutti gli articoli

Tipi di azioni

SLIDER: un controller di variabili CSS dentro la scheda — luminosità, zoom, font-size a portata di dito

15 maggio 2026 · di JustZix Team

JS è ottimo per «fai X». CSS è ottimo per «mostrati sempre come Y». E quando vuoi «regolare Y con continuità in tempo reale» — perché stai cercando la luminosità perfetta della pagina, il font-size ottimale per la tua vista, o stai testando livelli di zoom in una sola scheda? Allora usi uno SLIDER (da v2.13.19) — un <input type="range"> nativo nella barra delle azioni di JustZix con codice JS che parte a ogni cambio di valore.

Anatomia di uno SLIDER — 4 parti + 4 colori separati

Uno SLIDER nella barra delle azioni è un div wrap con tre figli: label (sinistra), <input type="range"> (centro), display del valore (destra). Ogni parte ha il proprio colore (da v2.13.19 — color picker granulare):

// Property dell'azione → effetto CSS
color           → sfondo dell'intero wrap
colorText       → accent-color dello slider (riempimento della barra)
colorLabel      → colore del testo per la label (lato sinistro)
colorValue      → colore del testo per il valore corrente (lato destro)

// Definizione del range
min: 0          // default 0
max: 100        // default 100
step: 1         // default 1
defaultValue: 50  // opzionale — fallback a (min+max)/2
unit: '%'       // opzionale — aggiunto al display del valore

Caso d'uso: uno slider «Luminosità» 50-150% può avere uno sfondo viola (color), riempimento dello slider bianco (colorText), una label «Luminosità» grigio chiaro (colorLabel), un valore «100%» giallo (colorValue). 4 colori = 4 livelli di contrasto separati, ognuno con un compito.

Due eventi: input vs change — la differenza chiave

Lo SLIDER esegue il JS del campo «Code» solo su change (dopo il rilascio del mouse), non su input (drag dal vivo). È intenzionale e fa risparmiare prestazioni:

Senza questo — trascinare da 0 a 100 eseguirebbe il codice 101 volte, ognuna con un reflow CSS. Jank e scatti. Con questo — il drag è gratuito, esecuzione una volta sola al rilascio. Se vuoi davvero l'aggiornamento dal vivo (es. una variabile CSS che richiede reattività a 60fps), usa colorValue + una variabile CSS aggiornata dal JS in modalità debounce.

Caso d'uso 1 — Controller di luminosità per qualsiasi pagina

I siti sono troppo luminosi in una notte buia. Il dark mode è «tutto o niente». Uno slider dà un controllo preciso 50-150%:

// Azione SLIDER «Luminosità»
min: 50, max: 150, step: 5, defaultValue: 100, unit: '%'

// Code (value è un Number):
document.documentElement.style.filter = `brightness(${value}%)`;
JUSTZIX.log(`Luminosità → ${value}%`);

Drag → feedback dal vivo tramite refreshValueDisplay («105%»); rilascio → filtro CSS applicato. La prossima volta su questo dominio, lo slider ricorda il valore. Lettura a tarda notte — 65%, mattina presto — 90%, mezzogiorno — 110%.

Caso d'uso 2 — Slider del font-size (accessibilità)

Un sito vecchio con font-size hardcoded: 11px. Lo zoom del browser scala tutto (la navigazione va in overflow). Uno slider:

// Azione 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';
});

Più una regola CSS in un'altra finestra: html { font-size: var(--base-font-size); }. Lo slider pilota solo la base — le proporzioni basate su rem restano. Utile per siti che non rispettano lo zoom del browser.

Caso d'uso 3 — Throttle della velocità di animazione (debug)

Debug di una complessa animazione CSS. A 1× è troppo veloce, lo step-by-step nei DevTools perde il flow. Uno slider:

// Azione SLIDER «Anim speed»
min: 1, max: 20, step: 1, defaultValue: 10, unit: '/10'

// Code:
const factor = 10 / value;  // value 10 = 1×, value 1 = 10× più lento, value 20 = 2× più veloce
document.querySelectorAll('*').forEach(el => {
  el.style.animationDuration = (factor) + 's';
  el.style.transitionDuration = (factor * 0.3) + 's';
});
JUSTZIX.log(`Fattore velocità anim: ${factor}x`);

Drag a 1 = 10× più lento, vedi ogni frame. Drag a 20 = 2× più veloce, verifichi i fast path. Senza il pannello «rendering» dei Chrome DevTools.

Caso d'uso 4 — Aggiornamento programmatico da un'altra azione

Il valore dello slider è disponibile tramite JZ.value('Luminosità') (ritorna una stringa da wrap.dataset.jzValue) e scrivibile tramite JZ.setValue('Luminosità', 100) — che fa dispatch degli eventi input + change, così il codice parte normalmente:

// In un'altra azione BUTTON «Reset all»:
JZ.setValue('Luminosità', 100);     // → filtro CSS brightness(100%)
JZ.setValue('Font',        16);     // → reset del font-size
JZ.setValue('Anim speed',  10);     // → reset della velocità di animazione
JUSTZIX.log('Tutti gli slider riportati ai default.');

JZ.setValue assegna il valore a input.value + fa dispatch di input + fa dispatch di change — lo stesso flusso di un drag manuale. Senza questa fix (v2.13.33) lo slider avrebbe dataset.jzValue === null e l'aggiornamento programmatico non eseguirebbe il codice.

Trappole

• Il value nel context è un Number, non una String (a differenza di INPUT/SELECT). Puoi fare operazioni matematiche senza parseFloat(). Ma attenzione: per la concatenazione di stringhe (es. el.style.width = value + 'px') JS fa coercizione automatica, quindi funziona.
• Il default come (min+max)/2 è un fallback sensato se dimentichi defaultValue. Con range 0-100 → 50; con 50-150 → 100. Ma per range non lineari (es. zoom 10-200) questo default può essere lontano da un «100%» naturale.
• colorText NON è il colore del testo per uno slider (da v2.13.19). È il colore di riempimento della barra (accent-color). Il testo sinistra/destra usa colorLabel / colorValue. Il codice vecchio dell'era BUTTON potrebbe confondere — nello SLIDER colorText è «fill», negli altri tipi è «text».
• La memory fa clamp al range. Se cambi min/max in seguito, la memory salvata oltre il nuovo range verrà clampata. Non c'è errore — lo slider scatta semplicemente all'endpoint più vicino.
• Il drag blocca il trascinamento della barra delle azioni (stopPropagation su mousedown + touchstart), così non trascini per sbaglio l'intera barra mentre afferri lo slider.

Cosa fare dopo

Lo SLIDER è un «fader fisico» nella scheda — zero overhead, <input> nativo, memory ibrida. Si abbina perfettamente con window.JZ helpers (JZ.setValue per il controllo programmatico) e con TOGGLE3 per preset rapidi (preset «Bright» / «Normal» / «Dim» che impostano lo slider a 130/100/70 tramite JZ.setValue).

Installa JustZix e costruisci il tuo primo SLIDER in 30 secondi.