← Все статьи

Типы действий

SLIDER: контроллер CSS-переменных внутри вкладки — яркость, зум, font-size под пальцем

15 мая 2026 · автор JustZix Team

JS отлично подходит для «сделай X». CSS отлично подходит для «всегда выгляди как Y». А когда хочешь «плавно регулировать Y в реальном времени» — потому что ищешь идеальную яркость страницы, оптимальный font-size для своего зрения, или тестируешь уровни зума в одной вкладке? Тогда используй SLIDER (с v2.13.19) — нативный <input type="range"> на панели действий JustZix с JS-кодом, запускающимся при каждом изменении значения.

Анатомия SLIDER — 4 части + 4 отдельных цвета

SLIDER на панели действий — это div-обёртка с тремя детьми: метка (слева), <input type="range"> (центр), отображение значения (справа). У каждой части свой цвет (с v2.13.19 — гранулярный color picker):

// Property действия → CSS-эффект
color           → фон всей обёртки
colorText       → accent-color слайдера (заполнение полосы)
colorLabel      → цвет текста метки (левая сторона)
colorValue      → цвет текста текущего значения (правая сторона)

// Определение диапазона
min: 0          // по умолчанию 0
max: 100        // по умолчанию 100
step: 1         // по умолчанию 1
defaultValue: 50  // необязательно — фолбэк на (min+max)/2
unit: '%'       // необязательно — добавляется к отображению значения

Сценарий: слайдер «Яркость» 50-150% может иметь фиолетовый фон (color), белое заполнение слайдера (colorText), светло-серую метку «Яркость» (colorLabel), жёлтое значение «100%» (colorValue). 4 цвета = 4 отдельных уровня контраста, у каждого своя задача.

Два события: input vs change — ключевая разница

SLIDER выполняет JS из поля «Code» только при change (после отпускания мыши), не при input (перетаскивание вживую). Это намеренно и экономит производительность:

Без этого — перетаскивание с 0 до 100 выполнило бы код 101 раз, каждый раз с CSS-reflow. Лаги и рывки. С этим — перетаскивание бесплатно, выполнение один раз при отпускании. Если ты действительно хочешь живое обновление (например, CSS-переменную, которая требует отзывчивости 60fps), используй colorValue + CSS-переменную, обновляемую из JS в режиме debounce.

Сценарий 1 — контроллер яркости для любой страницы

Сайты слишком яркие тёмной ночью. Тёмная тема — «всё или ничего». Слайдер даёт точный контроль 50-150%:

// Действие SLIDER «Яркость»
min: 50, max: 150, step: 5, defaultValue: 100, unit: '%'

// Code (value — это Number):
document.documentElement.style.filter = `brightness(${value}%)`;
JUSTZIX.log(`Яркость → ${value}%`);

Перетаскивание → живая обратная связь через refreshValueDisplay («105%»); отпускание → CSS-фильтр применён. В следующий раз на этом домене слайдер запоминает значение. Чтение поздней ночью — 65%, ранним утром — 90%, в полдень — 110%.

Сценарий 2 — слайдер font-size (доступность)

Старый сайт с захардкоженным font-size: 11px. Зум браузера масштабирует всё (навигация уходит в overflow). Слайдер:

// Действие SLIDER «Шрифт»
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';
});

Плюс CSS-правило в другом окне: html { font-size: var(--base-font-size); }. Слайдер управляет только базой — пропорции на rem остаются. Полезно для сайтов, не уважающих зум браузера.

Сценарий 3 — троттлинг скорости анимации (отладка)

Отладка сложной CSS-анимации. На 1× слишком быстро, пошаговый режим в DevTools теряет поток. Слайдер:

// Действие SLIDER «Anim speed»
min: 1, max: 20, step: 1, defaultValue: 10, unit: '/10'

// Code:
const factor = 10 / value;  // value 10 = 1×, value 1 = в 10× медленнее, value 20 = в 2× быстрее
document.querySelectorAll('*').forEach(el => {
  el.style.animationDuration = (factor) + 's';
  el.style.transitionDuration = (factor * 0.3) + 's';
});
JUSTZIX.log(`Фактор скорости анимации: ${factor}x`);

Перетаскивание на 1 = в 10× медленнее, видишь каждый кадр. Перетаскивание на 20 = в 2× быстрее, проверяешь быстрые пути. Без панели «rendering» Chrome DevTools.

Сценарий 4 — программное обновление из другого действия

Значение слайдера доступно через JZ.value('Яркость') (возвращает строку из wrap.dataset.jzValue) и записываемо через JZ.setValue('Яркость', 100) — что диспатчит события input + change, так что код запускается нормально:

// В другом действии BUTTON «Reset all»:
JZ.setValue('Яркость',  100);     // → CSS-фильтр brightness(100%)
JZ.setValue('Шрифт',    16);      // → сброс font-size
JZ.setValue('Anim speed', 10);    // → сброс скорости анимации
JUSTZIX.log('Все слайдеры возвращены к дефолтам.');

JZ.setValue присваивает значение input.value + диспатчит input + диспатчит change — тот же поток, что и при ручном перетаскивании. Без этого фикса (v2.13.33) у слайдера был бы dataset.jzValue === null, и программное обновление не выполняло бы код.

Ловушки

• value в контексте — это Number, не String (в отличие от INPUT/SELECT). Можно делать математику без parseFloat(). Но осторожно: для конкатенации строк (например, el.style.width = value + 'px') JS делает автоматическое приведение, так что это работает.
• Дефолт как (min+max)/2 — разумный фолбэк, если ты забыл defaultValue. С диапазоном 0-100 → 50; с 50-150 → 100. Но для нелинейных диапазонов (например, зум 10-200) этот дефолт может быть далёк от естественных «100%».
• colorText НЕ цвет текста для слайдера (с v2.13.19). Это цвет заполнения полосы (accent-color). Текст слева/справа использует colorLabel / colorValue. Старый код эпохи BUTTON может запутать — в SLIDER colorText это «fill», в других типах это «text».
• Memory делает clamp по диапазону. Если позже изменить min/max, сохранённая memory вне нового диапазона будет ограничена. Ошибки нет — слайдер просто прыгает к ближайшей конечной точке.
• Перетаскивание блокирует перетаскивание панели действий (stopPropagation на mousedown + touchstart), так что ты не перетащишь по ошибке всю панель, схватив слайдер.

Что делать дальше

SLIDER — это «физический фейдер» во вкладке — нулевые накладные расходы, нативный <input>, гибридная memory. Идеально сочетается с window.JZ helpers (JZ.setValue для программного управления) и с TOGGLE3 для быстрых пресетов (пресеты «Bright» / «Normal» / «Dim», устанавливающие слайдер на 130/100/70 через JZ.setValue).

Установи JustZix и построй свой первый SLIDER за 30 секунд.