VGRangeSlider

Слайдер диапазона значений

Базовые сценарии

Нативный input, две границы, объединение подсказок и дробный шаг.

Слайдеры используют нативные input[type="range"]: перетаскивайте ручку или используйте Tab и стрелки, Home / End. Примеры подключены к общей теме VGApp и OKAUX 1.0.2. Ручную инициализацию выполняйте после появления разметки.

Нативный input и Data API

Одна ручка от 0 до 100, шаг 5. Атрибуты input задают начальное значение и имя поля; output обновляется самим модулем.

HTML 
<div class="range-demo">
    <label for="range-native" class="range-demo-label">Громкость</label>
    <input id="range-native" type="range" name="volume" min="0" max="100" step="5" value="35"
        data-vgrangeslider data-suffix=" %" data-output="#range-native-value">
    <output id="range-native-value" for="range-native" class="range-demo-result" aria-live="polite"></output>
</div>
JavaScript 
/**
 * Описание: одиночный слайдер громкости через Data API.
 * Возможности: автоинициализация, подписи и синхронизация output.
 */
// Дополнительная инициализация не требуется: используется Data API.
CSS 
/* Композиция демо; трек, ручки, шкала и подсказки оформляются VGRangeSlider. */
.range-demo {
    min-width: 0;
    padding: 1rem;
}
.range-demo-label {
    display: block;
    margin-bottom: 2.5rem;
    font-weight: 600;
}
.range-demo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-top: 2rem;
}
.range-demo-result {
    display: block;
    margin: 1.5rem 0 0;
    padding: .75rem;
    border: 1px solid var(--vg-border-default);
    border-radius: .5rem;
    color: var(--vg-text-primary);
    background: var(--vg-background-secondary);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.range-demo-log {
    max-height: 15rem;
    overflow-y: auto;
}

Две границы и общая подсказка

Ручки не пересекаются. Сблизьте значения кнопкой или клавиатурой: пересекающиеся tooltips объединятся в одну подсказку диапазона.

Рабочий интервал
HTML 
<div class="range-demo">
    <div id="range-interval-label" class="range-demo-label">Рабочий интервал</div>
    <div id="range-interval" role="group" aria-labelledby="range-interval-label"
        data-vgrangeslider data-range="true" data-min="0" data-max="100" data-start='[20,80]'
        data-name='{"min":"interval_from","max":"interval_to"}' data-output="#range-interval-value"></div>
    <div class="range-demo-actions">
        <button id="range-interval-close" type="button" class="btn btn-primary btn-sm">Сблизить ручки</button>
        <button id="range-interval-reset" type="button" class="btn btn-surface btn-sm">Вернуть 20–80</button>
    </div>
    <output id="range-interval-value" class="range-demo-result" aria-live="polite"></output>
</div>
JavaScript 
/**
 * Описание: рабочий пример VGRangeSlider — range.
 * Возможности: две границы, доступные имена ручек и объединение подсказок.
 */
import { VGRangeSlider } from 'vgapp';

function initRangeDemo() {
    const root = document.querySelector('#range-interval');
    if (!root) return;

    const slider = VGRangeSlider.init(root); // Data API уже может создать этот экземпляр.
    root.querySelector('.vg-range-slider__input--from').setAttribute('aria-label', 'Начало интервала');
    root.querySelector('.vg-range-slider__input--to').setAttribute('aria-label', 'Конец интервала');
    document.querySelector('#range-interval-close').addEventListener('click', () => slider.setValue([48, 52]));
    document.querySelector('#range-interval-reset').addEventListener('click', () => slider.setValue([20, 80]));
}

initRangeDemo();
CSS 
/* Композиция демо; трек, ручки, шкала и подсказки оформляются VGRangeSlider. */
.range-demo {
    min-width: 0;
    padding: 1rem;
}
.range-demo-label {
    display: block;
    margin-bottom: 2.5rem;
    font-weight: 600;
}
.range-demo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-top: 2rem;
}
.range-demo-result {
    display: block;
    margin: 1.5rem 0 0;
    padding: .75rem;
    border: 1px solid var(--vg-border-default);
    border-radius: .5rem;
    color: var(--vg-text-primary);
    background: var(--vg-background-secondary);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.range-demo-log {
    max-height: 15rem;
    overflow-y: auto;
}

Дробный шаг и отрицательные значения

Диапазон −5…5 с шагом 0,25. Подписи и внешний output используют suffix, числовое значение input остаётся без единиц измерения.

HTML 
<div class="range-demo">
    <label for="range-step" class="range-demo-label">Температурная поправка</label>
    <input id="range-step" type="range" name="temperature_offset" min="-5" max="5" step="0.25" value="1.5"
        data-vgrangeslider data-suffix=" °C" data-output="#range-step-value">
    <output id="range-step-value" for="range-step" class="range-demo-result" aria-live="polite"></output>
</div>
JavaScript 
/**
 * Описание: слайдер с отрицательными значениями и дробным шагом через Data API.
 * Возможности: автоинициализация, подписи и синхронизация output.
 */
// Дополнительная инициализация не требуется: используется Data API.
CSS 
/* Композиция демо; трек, ручки, шкала и подсказки оформляются VGRangeSlider. */
.range-demo {
    min-width: 0;
    padding: 1rem;
}
.range-demo-label {
    display: block;
    margin-bottom: 2.5rem;
    font-weight: 600;
}
.range-demo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-top: 2rem;
}
.range-demo-result {
    display: block;
    margin: 1.5rem 0 0;
    padding: .75rem;
    border: 1px solid var(--vg-border-default);
    border-radius: .5rem;
    color: var(--vg-text-primary);
    background: var(--vg-background-secondary);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.range-demo-log {
    max-height: 15rem;
    overflow-y: auto;
}

Два способа инициализации

data-vgrangeslider
Автоматический поиск при DOMContentLoaded. Для динамически добавленного элемента вызовите VGRangeSlider.init(element).
input[type="range"]
Всегда одиночный режим. min, max, step, value, name и disabled берутся с исходного input; он остаётся в форме с прежним id.
Контейнер
range: true создаёт две ручки; start: [from, to] задаёт границы. Также поддерживаются from и to. Содержимое контейнера заменяется разметкой модуля.
Data API
data-range="true", data-start='[20,80]', data-min, data-max, data-step. Вложенные параметры можно передавать JSON-объектами; camelCase-ключи сохраняйте внутри data-params.