← Alle Beiträge

Aktionstypen

SLIDER: ein CSS-Variablen-Controller im Tab — Helligkeit, Zoom, Schriftgröße per Fingerspitze

15 Mai 2026 · von JustZix Team

JS ist großartig für „tu X". CSS ist großartig für „sieh immer aus wie Y". Was, wenn du „Y in Echtzeit fein justieren" willst — weil du die perfekte Seitenhelligkeit jagst, die optimale Schriftgröße für deine Augen, oder Zoom-Stufen in einem Tab testest? Dann nutzt du einen SLIDER (seit v2.13.19) — einen nativen <input type="range"> in der JustZix-Aktionsleiste mit JS-Code, der bei jeder Wertänderung feuert.

Anatomie eines SLIDER — 4 Teile + 4 separate Farben

Ein SLIDER in der Aktionsleiste ist ein Wrap-Div mit drei Kindern: Label (links), <input type="range"> (Mitte), Wertanzeige (rechts). Jeder Teil hat seine eigene Farbe (seit v2.13.19 — granularer Farbwähler):

// Aktions-Eigenschaft → CSS-Effekt
color           → Hintergrund des gesamten Wraps
colorText       → accent-color des Sliders (die Füllung der Leiste)
colorLabel      → text-color des Labels (linke Seite)
colorValue      → text-color des aktuellen Werts (rechte Seite)

// Bereichsdefinition
min: 0          // Standard 0
max: 100        // Standard 100
step: 1         // Standard 1
defaultValue: 50  // optional — fällt auf (min+max)/2 zurück
unit: '%'       // optional — wird an die Wertanzeige angehängt

Anwendungsfall: ein „Helligkeit"-Slider 50-150% kann einen violetten Hintergrund (color) haben, eine weiße Slider-Füllung (colorText), ein hellgraues „Helligkeit"-Label (colorLabel), einen gelben „100%"-Wert (colorValue). 4 Farben = 4 separate Kontraststufen, jede mit einer Aufgabe.

Zwei Events: input vs. change — der entscheidende Unterschied

Der SLIDER feuert den JS aus dem Code-Feld nur bei change (nach dem Loslassen der Maus), nicht bei input (Live-Ziehen). Das ist Absicht und spart Performance:

Ohne das — würde das Ziehen von 0 auf 100 den Code 101-mal feuern, jedes Mal mit einem CSS-Reflow. Jank und Jitter. Damit — ist das Ziehen kostenlos, fire-once beim Loslassen. Wenn du doch ein Live-Update willst (z. B. eine CSS-Variable, die 60fps-Reaktivität braucht), nutze colorValue + eine CSS-Variable, die per JS im Debounce-Modus aktualisiert wird.

Anwendungsfall 1 — Helligkeitsregler für jede Seite

Seiten sind in einer dunklen Nacht zu hell. Dark Mode ist „alles oder nichts". Ein Slider gibt präzise 50-150%-Kontrolle:

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

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

Ziehen → Live-Feedback über refreshValueDisplay („105%"); Loslassen → CSS-Filter angewendet. Beim nächsten Mal auf dieser Domain merkt sich der Slider den Wert. Spätabendliches Lesen — 65%, früher Morgen — 90%, Mittag — 110%.

Anwendungsfall 2 — Schriftgröße-Slider (Barrierefreiheit)

Eine alte Seite mit hartkodierter font-size: 11px. Der Browser-Zoom skaliert alles (die Navigation läuft über). Ein Slider:

// Aktion SLIDER "Schrift"
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 eine CSS-Regel in einem anderen Fenster: html { font-size: var(--base-font-size); }. Der Slider steuert nur die Basis — rem-basierte Proportionen bleiben. Nützlich für Seiten, die den Browser-Zoom nicht respektieren.

Anwendungsfall 3 — Drossel für die Animationsgeschwindigkeit (Debug)

Debugging einer komplexen CSS-Animation. 1× ist zu schnell, Schritt-für-Schritt in den DevTools verliert den Fluss. Ein Slider:

// Aktion SLIDER "Anim-Tempo"
min: 1, max: 20, step: 1, defaultValue: 10, unit: '/10'

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

Auf 1 ziehen = 10× langsamer, du siehst jedes Frame. Auf 20 ziehen = 2× schneller, schnelle Pfade verifizieren. Ohne das „Rendering"-Panel der Chrome DevTools.

Anwendungsfall 4 — programmatisches Update aus einer anderen Aktion

Der Slider-Wert ist über JZ.value('Helligkeit') verfügbar (gibt einen String aus wrap.dataset.jzValue zurück) und über JZ.setValue('Helligkeit', 100) beschreibbar — was input- + change-Events dispatcht, sodass der Code normal feuert:

// In einer anderen BUTTON-Aktion "Alles zurücksetzen":
JZ.setValue('Helligkeit', 100);     // → CSS-Filter brightness(100%)
JZ.setValue('Schrift',    16);      // → Schriftgröße zurücksetzen
JZ.setValue('Anim-Tempo', 10);      // → Animationsgeschwindigkeit zurücksetzen
JUSTZIX.log('Alle Slider auf die Standardwerte zurückgesetzt.');

JZ.setValue weist den Wert input.value zu + dispatcht input + dispatcht change — derselbe Ablauf wie ein manuelles Ziehen. Ohne diesen Fix (v2.13.33) hätte der Slider dataset.jzValue === null und das programmatische Update würde den Code nicht feuern.

Fallstricke

• Der Wert im Kontext ist ein Number, kein String (anders als bei INPUT/SELECT). Du kannst Rechenoperationen ohne parseFloat() machen. Aber Vorsicht: für String-Konkatenation (z. B. el.style.width = value + 'px') coerced JS automatisch, also funktioniert es.
• Standard als (min+max)/2 ist ein vernünftiger Fallback, wenn du defaultValue vergisst. Bei Bereich 0-100 → 50; bei 50-150 → 100. Aber bei nichtlinearen Bereichen (z. B. Zoom 10-200) kann dieser Standard weit von einem „natürlichen" 100% entfernt sein.
• colorText ist NICHT die Textfarbe bei einem Slider (seit v2.13.19). Es ist die Füllfarbe der Leiste (accent-color). Linker/rechter Text nutzt colorLabel / colorValue. Älterer Code aus der BUTTON-Ära kann verwirren — beim SLIDER ist colorText die „Füllung", bei anderen Typen ist es „Text".
• Das Memory clampt auf den Bereich. Wenn du min/max später änderst, wird gespeichertes Memory jenseits des neuen Bereichs geclampt. Es gibt keinen Fehler — der Slider rastet einfach auf den nächsten Endpunkt.
• Das Ziehen blockiert das Ziehen der Aktionsleiste (mousedown + touchstart stopPropagation), sodass du nicht versehentlich die ganze Leiste ziehst, während du den Slider greifst.

Was kommt als Nächstes

Der SLIDER ist ein „physischer Fader" im Tab — kein Overhead, natives <input>, hybrides Memory. Er passt wunderbar zu den window.JZ-Helfern (JZ.setValue für programmatische Steuerung) und zu TOGGLE3 für schnelle Presets („Hell" / „Normal" / „Gedimmt"-Presets, die den Slider per JZ.setValue auf 130/100/70 setzen).

Installiere JustZix und bau deinen ersten SLIDER in 30 Sekunden.