← Tous les articles

Types d'actions

SLIDER : un contrôleur de variable CSS dans l'onglet — luminosité, zoom, taille de police au bout des doigts

15 mai 2026 · par JustZix Team

Le JS est génial pour « faire X ». Le CSS est génial pour « ressembler toujours à Y ». Et si vous voulez « ajuster Y en douceur en temps réel » — parce que vous cherchez la luminosité de page parfaite, la taille de police optimale pour votre vue, ou que vous testez des niveaux de zoom dans un onglet ? Alors vous utilisez un SLIDER (depuis v2.13.19) — un <input type="range"> natif dans la barre d'actions JustZix avec un code JS qui se déclenche à chaque changement de valeur.

Anatomie d'un SLIDER — 4 parties + 4 couleurs séparées

Un SLIDER dans la barre d'actions est une div wrap avec trois enfants : label (gauche), <input type="range"> (milieu), affichage de la valeur (droite). Chaque partie a sa propre couleur (depuis v2.13.19 — sélecteur de couleur granulaire) :

// Propriété d'action → effet CSS
color           → fond de tout le wrap
colorText       → accent-color du curseur (le remplissage de la barre)
colorLabel      → text-color du label (côté gauche)
colorValue      → text-color de la valeur actuelle (côté droit)

// Définition de la plage
min: 0          // défaut 0
max: 100        // défaut 100
step: 1         // défaut 1
defaultValue: 50  // optionnel — retombe sur (min+max)/2
unit: '%'       // optionnel — ajouté à l'affichage de la valeur

Cas d'usage : un curseur « Luminosité » 50-150% peut avoir un fond violet (color), un remplissage de curseur blanc (colorText), un label « Luminosité » gris clair (colorLabel), une valeur « 100% » jaune (colorValue). 4 couleurs = 4 niveaux de contraste séparés, chacun avec un rôle.

Deux événements : input vs change — la différence clé

Le SLIDER ne déclenche le JS du champ Code que sur change (après le relâchement de la souris), pas sur input (glissement en direct). C'est intentionnel et économise des performances :

Sans cela — glisser de 0 à 100 déclencherait le code 101 fois, chacune avec un reflow CSS. Saccades et jitter. Avec cela — le glissement est gratuit, fire-once au relâchement. Si vous voulez vraiment une mise à jour en direct (p. ex. une variable CSS qui a besoin de réactivité 60fps), utilisez colorValue + une variable CSS mise à jour par JS en mode debounce.

Cas d'usage 1 — contrôleur de luminosité pour n'importe quelle page

Les sites sont trop lumineux dans une nuit sombre. Le mode sombre, c'est « tout ou rien ». Un curseur donne un contrôle précis de 50-150% :

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

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

Glissement → retour en direct via refreshValueDisplay (« 105% ») ; relâchement → filtre CSS appliqué. La prochaine fois sur ce domaine, le curseur se souvient de la valeur. Lecture tard le soir — 65%, tôt le matin — 90%, midi — 110%.

Cas d'usage 2 — curseur de taille de police (accessibilité)

Un vieux site avec une font-size: 11px codée en dur. Le zoom navigateur met tout à l'échelle (la navigation déborde). Un curseur :

// Action SLIDER "Police"
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 une règle CSS dans une autre fenêtre : html { font-size: var(--base-font-size); }. Le curseur ne pilote que la base — les proportions en rem restent. Utile pour les sites qui ne respectent pas le zoom navigateur.

Cas d'usage 3 — throttle de vitesse d'animation (debug)

Débogage d'une animation CSS complexe. 1× est trop rapide, pas à pas dans les DevTools perd le flux. Un curseur :

// Action SLIDER "Vitesse anim"
min: 1, max: 20, step: 1, defaultValue: 10, unit: '/10'

// Code :
const factor = 10 / value;  // value 10 = 1×, value 1 = 10× plus lent, value 20 = 2× plus rapide
document.querySelectorAll('*').forEach(el => {
  el.style.animationDuration = (factor) + 's';
  el.style.transitionDuration = (factor * 0.3) + 's';
});
JUSTZIX.log(`Facteur vitesse anim : ${factor}x`);

Glissez à 1 = 10× plus lent, vous voyez chaque frame. Glissez à 20 = 2× plus rapide, vérifiez les chemins rapides. Sans le panneau « rendering » des Chrome DevTools.

Cas d'usage 4 — mise à jour programmatique depuis une autre action

La valeur du curseur est disponible via JZ.value('Luminosité') (renvoie une string depuis wrap.dataset.jzValue) et modifiable via JZ.setValue('Luminosité', 100) — qui dispatche les événements input + change, donc le code se déclenche normalement :

// Dans une autre action BUTTON "Tout réinitialiser" :
JZ.setValue('Luminosité', 100);     // → filtre CSS brightness(100%)
JZ.setValue('Police',     16);      // → réinitialiser la taille de police
JZ.setValue('Vitesse anim', 10);    // → réinitialiser la vitesse d'animation
JUSTZIX.log('Tous les curseurs réinitialisés aux valeurs par défaut.');

JZ.setValue assigne la valeur à input.value + dispatche input + dispatche change — le même flux qu'un glissement manuel. Sans ce correctif (v2.13.33) le curseur aurait dataset.jzValue === null et la mise à jour programmatique ne déclencherait pas le code.

Pièges

• La valeur dans le contexte est un Number, pas un String (contrairement à INPUT/SELECT). Vous pouvez faire des opérations mathématiques sans parseFloat(). Mais attention : pour la concaténation de chaînes (p. ex. el.style.width = value + 'px') JS fait une coercition automatique, donc ça marche.
• Le défaut comme (min+max)/2 est un fallback sensé si vous oubliez defaultValue. Avec une plage 0-100 → 50 ; avec 50-150 → 100. Mais pour des plages non linéaires (p. ex. zoom 10-200) ce défaut peut être loin d'un « 100% » naturel.
• colorText n'est PAS la couleur du texte pour un curseur (depuis v2.13.19). C'est la couleur de remplissage de la barre (accent-color). Le texte gauche/droite utilise colorLabel / colorValue. Du vieux code de l'ère BUTTON peut prêter à confusion — dans SLIDER colorText est le « remplissage », dans les autres types c'est le « texte ».
• La mémoire clampe sur la plage. Si vous changez min/max plus tard, la mémoire stockée au-delà de la nouvelle plage sera clampée. Pas d'erreur — le curseur se cale simplement sur l'extrémité la plus proche.
• Le glissement bloque le glissement de la barre d'actions (mousedown + touchstart stopPropagation), pour que vous ne glissiez pas accidentellement toute la barre en attrapant le curseur.

Et ensuite

Le SLIDER est un « fader physique » dans l'onglet — zéro overhead, <input> natif, mémoire hybride. Il se marie magnifiquement avec les helpers window.JZ (JZ.setValue pour le contrôle programmatique) et avec TOGGLE3 pour des presets rapides (presets « Vif » / « Normal » / « Tamisé » qui mettent le curseur à 130/100/70 via JZ.setValue).

Installez JustZix et construisez votre premier SLIDER en 30 secondes.