VGRangeSlider

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

Шкала и статусы

Отметки ruler, активная область и пороговые цвета status.

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

Шкала с неравномерными отметками

Явные значения 0, 10, 25, 50 и 100. Отметки внутри выбранного диапазона выделены, остальные приглушены. При изменении ширины шкала пересчитывает позиции.

Область значений на шкале

<div class="range-demo">
    <div id="range-ruler-label" class="range-demo-label">Область значений на шкале</div>
    <div id="range-ruler" role="group" aria-labelledby="range-ruler-label"></div>
    <output id="range-ruler-value" class="range-demo-result" aria-live="polite"></output>
</div>

/**
 * Описание: рабочий пример VGRangeSlider — ruler.
 * Возможности: неравномерная шкала и активные отметки.
 */
import { VGRangeSlider } from 'vgapp';

function initRangeDemo() {
    const root = document.querySelector('#range-ruler');
    if (!root || VGRangeSlider.getInstance(root)) return;

    VGRangeSlider.init(root, {
        range: true, min: 0, max: 100, start: [10, 75],
        skin: 'ruler',
        ruler: { values: [0, 10, 25, 50, 100], dimInactive: true },
        output: '#range-ruler-value'
    });
    root.querySelector('.vg-range-slider__input--from').setAttribute('aria-label', 'Начало области');
    root.querySelector('.vg-range-slider__input--to').setAttribute('aria-label', 'Конец области');
}

initRangeDemo();

/* Композиция демо; трек, ручки, шкала и подсказки оформляются 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;
}

Статус по порогам

Ниже 30% — низкий уровень, от 30% до 60% — средний, от 60% — высокий. Кнопки задают контрольные значения, а поле под слайдером показывает реальный status из события.

Уровень заполнения

<div class="range-demo">
    <div id="range-status-label" class="range-demo-label">Уровень заполнения</div>
    <div id="range-status" role="group" aria-labelledby="range-status-label"></div>
    <div id="range-status-actions" class="range-demo-actions">
        <button type="button" class="btn btn-surface btn-sm" data-status-value="20">20% — низкий</button>
        <button type="button" class="btn btn-surface btn-sm" data-status-value="45">45% — средний</button>
        <button type="button" class="btn btn-surface btn-sm" data-status-value="80">80% — высокий</button>
    </div>
    <output id="range-status-value" class="range-demo-result" aria-live="polite"></output>
</div>

/**
 * Описание: рабочий пример VGRangeSlider — status.
 * Возможности: пороговые цвета, подписи и callbacks статуса.
 */
import { VGRangeSlider } from 'vgapp';

function initRangeDemo() {
    const root = document.querySelector('#range-status');
    if (!root || VGRangeSlider.getInstance(root)) return;

    const output = document.querySelector('#range-status-value');
    const report = (element, detail) => {
        output.textContent = detail.status.label + ' · ' + detail.status.percent + '% · ' + detail.status.tone;
    };
    const slider = VGRangeSlider.init(root, {
        min: 0, max: 100, step: 5, start: 80,
        skin: 'status', suffix: ' %',
        status: { warningBelow: 60, dangerBelow: 30 },
        labelWords: ['Низкий', 'Средний', 'Высокий'],
        onInit: report, onInput: report, onChange: report, onUpdate: report
    });
    root.querySelector('input[type="range"]').setAttribute('aria-label', 'Уровень заполнения');
    document.querySelector('#range-status-actions').addEventListener('click', (event) => {
        const button = event.target.closest('[data-status-value]');
        if (button) slider.setValue(Number(button.dataset.statusValue));
    });
}

initRangeDemo();

/* Композиция демо; трек, ручки, шкала и подсказки оформляются 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;
}

Настройки оформления

skin: default / ruler / status: Обычный трек, шкала отметок или окраска по порогам.
ruler.count / values: count (по умолчанию 6) создаёт равномерные отметки. Массив values задаёт явные значения; выбирайте их внутри min…max.
ruler.labels / dimInactive: Подписи шкалы включены по умолчанию. dimInactive: true приглушает значения вне выбранной области.
status.warningBelow / dangerBelow: По умолчанию 60 и 30. Это проценты от min…max, а не абсолютные значения шкалы.
status.by: Для диапазона: from, to (по умолчанию) или avg — источник общего цвета. Для одиночного слайдера используется его текущее значение.
labelWords: Три подписи в порядке danger, warning, success. В диапазоне подпись каждой границы определяется её собственным значением.

CSS-переменные

Трек и ручки: --vg-range-slider-height, --vg-range-slider-bg, --vg-range-slider-fill, --vg-range-slider-thumb, --vg-range-slider-thumb-size, --vg-range-slider-thumb-border.
Подсказки: --vg-range-slider-tooltip-bg, --vg-range-slider-tooltip-color, --vg-range-slider-tooltip-font-size, --vg-range-slider-tooltip-radius.
Подписи и шкала: --vg-range-slider-labels-font-size, --vg-range-slider-ruler-mark-height, --vg-range-slider-ruler-label-color, --vg-range-slider-ruler-inactive-opacity.
Статусы: --vg-range-slider-status-success, --vg-range-slider-status-warning, --vg-range-slider-status-danger и соответствующие *-contrast.

Используйте публичный SCSS-вход vgapp/rangeslider или общий vgapp/scss. Состояние темы остаётся в OKAUX; адаптер vgapp/theme использует тот же data-theme.