← Todos los artículos

Tipos de acciones

SLIDER: un controlador de variables CSS dentro de la pestaña — brillo, zoom, font-size al alcance del dedo

15 mayo 2026 · por JustZix Team

JS es genial para «haz X». CSS es genial para «muéstrate siempre como Y». ¿Y cuando quieres «ajustar Y de forma continua en tiempo real» — porque estás buscando el brillo perfecto de la página, el font-size óptimo para tu vista, o estás probando niveles de zoom en una sola pestaña? Entonces usas un SLIDER (desde v2.13.19) — un <input type="range"> nativo en la barra de acciones de JustZix con código JS que arranca en cada cambio de valor.

Anatomía de un SLIDER — 4 partes + 4 colores separados

Un SLIDER en la barra de acciones es un div wrap con tres hijos: label (izquierda), <input type="range"> (centro), display del valor (derecha). Cada parte tiene su propio color (desde v2.13.19 — color picker granular):

// Property de la acción → efecto CSS
color           → fondo de todo el wrap
colorText       → accent-color del slider (relleno de la barra)
colorLabel      → color del texto para la label (lado izquierdo)
colorValue      → color del texto para el valor actual (lado derecho)

// Definición del rango
min: 0          // default 0
max: 100        // default 100
step: 1         // default 1
defaultValue: 50  // opcional — fallback a (min+max)/2
unit: '%'       // opcional — añadido al display del valor

Caso de uso: un slider «Brillo» 50-150% puede tener un fondo morado (color), relleno del slider blanco (colorText), una label «Brillo» gris claro (colorLabel), un valor «100%» amarillo (colorValue). 4 colores = 4 niveles de contraste separados, cada uno con una tarea.

Dos eventos: input vs change — la diferencia clave

El SLIDER ejecuta el JS del campo «Code» solo en change (tras soltar el ratón), no en input (drag en vivo). Es intencionado y ahorra rendimiento:

Sin esto — arrastrar de 0 a 100 ejecutaría el código 101 veces, cada una con un reflow CSS. Jank y tirones. Con esto — el drag es gratis, ejecución una sola vez al soltar. Si de verdad quieres la actualización en vivo (p. ej. una variable CSS que exige reactividad a 60fps), usa colorValue + una variable CSS actualizada por el JS en modo debounce.

Caso de uso 1 — Controlador de brillo para cualquier página

Los sitios son demasiado brillantes en una noche oscura. El dark mode es «todo o nada». Un slider da un control preciso 50-150%:

// Acción SLIDER «Brillo»
min: 50, max: 150, step: 5, defaultValue: 100, unit: '%'

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

Drag → feedback en vivo mediante refreshValueDisplay («105%»); soltar → filtro CSS aplicado. La próxima vez en este dominio, el slider recuerda el valor. Lectura a altas horas — 65%, mañana temprano — 90%, mediodía — 110%.

Caso de uso 2 — Slider del font-size (accesibilidad)

Un sitio antiguo con font-size hardcodeado: 11px. El zoom del navegador escala todo (la navegación se desborda). Un slider:

// Acción 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';
});

Más una regla CSS en otra ventana: html { font-size: var(--base-font-size); }. El slider pilota solo la base — las proporciones basadas en rem se mantienen. Útil para sitios que no respetan el zoom del navegador.

Caso de uso 3 — Throttle de la velocidad de animación (debug)

Debug de una compleja animación CSS. A 1× es demasiado rápida, el paso a paso en las DevTools pierde el flow. Un slider:

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

// Code:
const factor = 10 / value;  // value 10 = 1×, value 1 = 10× más lento, value 20 = 2× más rápido
document.querySelectorAll('*').forEach(el => {
  el.style.animationDuration = (factor) + 's';
  el.style.transitionDuration = (factor * 0.3) + 's';
});
JUSTZIX.log(`Factor de velocidad anim: ${factor}x`);

Drag a 1 = 10× más lento, ves cada frame. Drag a 20 = 2× más rápido, verificas los fast paths. Sin el panel «rendering» de las Chrome DevTools.

Caso de uso 4 — Actualización programática desde otra acción

El valor del slider está disponible mediante JZ.value('Brillo') (devuelve un string de wrap.dataset.jzValue) y es escribible mediante JZ.setValue('Brillo', 100) — que hace dispatch de los eventos input + change, así el código arranca normalmente:

// En otra acción BUTTON «Reset all»:
JZ.setValue('Brillo',     100);     // → filtro CSS brightness(100%)
JZ.setValue('Font',        16);     // → reset del font-size
JZ.setValue('Anim speed',  10);     // → reset de la velocidad de animación
JUSTZIX.log('Todos los sliders devueltos a los defaults.');

JZ.setValue asigna el valor a input.value + hace dispatch de input + hace dispatch de change — el mismo flujo que un drag manual. Sin este fix (v2.13.33) el slider tendría dataset.jzValue === null y la actualización programática no ejecutaría el código.

Trampas

• El value en el context es un Number, no un String (a diferencia de INPUT/SELECT). Puedes hacer operaciones matemáticas sin parseFloat(). Pero ojo: para la concatenación de cadenas (p. ej. el.style.width = value + 'px') JS hace coerción automática, así que funciona.
• El default como (min+max)/2 es un fallback sensato si olvidas defaultValue. Con rango 0-100 → 50; con 50-150 → 100. Pero para rangos no lineales (p. ej. zoom 10-200) este default puede quedar lejos de un «100%» natural.
• colorText NO es el color del texto para un slider (desde v2.13.19). Es el color de relleno de la barra (accent-color). El texto izquierda/derecha usa colorLabel / colorValue. El código antiguo de la era BUTTON podría confundir — en el SLIDER colorText es «fill», en los demás tipos es «text».
• La memory hace clamp al rango. Si cambias min/max más tarde, la memory guardada fuera del nuevo rango será clampada. No hay error — el slider simplemente salta al endpoint más cercano.
• El drag bloquea el arrastre de la barra de acciones (stopPropagation sobre mousedown + touchstart), así no arrastras por error toda la barra mientras agarras el slider.

Qué hacer después

El SLIDER es un «fader físico» en la pestaña — cero overhead, <input> nativo, memory híbrida. Combina perfectamente con window.JZ helpers (JZ.setValue para el control programático) y con TOGGLE3 para presets rápidos (presets «Bright» / «Normal» / «Dim» que ponen el slider a 130/100/70 mediante JZ.setValue).

Instala JustZix y construye tu primer SLIDER en 30 segundos.