GrSlider

<GrSlider v-model="temperature" :marks="{ 16: 'холодно', 30: 'жарко' }">
  <template #thumb="{ value }">{{ value }}</template>
  <template #mark="{ label, active }">
    <span :class="active ? 'text-[var(--gr-primary-text)]' : ''">{{ label }}</span>
  </template>
</GrSlider>

#thumb рендерится внутрь ручки, а не вместо неё. На её узле висят role="slider", tabindex, восемь aria-* — включая aria-valuemin и aria-valuemax, которые у диапазона считаются от соседнего бегунка, — плюс обработчик клавиатуры и позиционирование. Отдать эту разметку потребителю значит отдать вместе с ней весь виджетный контракт.

Вид самой ручки при этом меняется токенами --gr-slider-thumb-bg, -border и -size, так что «совсем другая ручка» собирается связкой «токены + слот». Тултип со значением остаётся рядом со слотом, а не вытесняется им.

#mark получает active — попало ли деление в закрашенную часть. Ради него слот чаще всего и берут: снаружи это не вычислить, модель в скоуп иначе не приходит. У диапазона закрашен участок между бегунками, а не от нуля, поэтому деление слева от первого бегунка пройденным не считается — active считается тем же способом, что и сама заливка.

Подпись деления остаётся aria-hidden: диктор читает значение с бегунка, и второй текст внутри слайдера ему только мешает.

Текст тултипа задаётся не слотом, а formatTooltip: там нужна строка, а не разметка — подсказка живёт поверх ручки и своей раскладки не имеет.

<GrSlider v-model="range" range :min="0" :max="100" aria-label="Бюджет" />

Модель — кортеж [lo, hi]; бегунки не перепрыгивают друг друга. Клик по дорожке уводит ближайший бегунок, а когда оба сошлись в точку — тот, в сторону которого кликнули: иначе схлопнутый диапазон было бы не развести мышью.

Каждый бегунок получает своё имя: ariaLabel плюс граница из локали (gr.slider.min / gr.slider.max) — «Бюджет (минимум)».

<GrSlider v-model="volume" orientation="vertical" :style="{ '--gr-slider-length': '12rem' }" />

В вертикальной дорожке минимум внизу. Длина задаётся --gr-slider-length (по умолчанию 10rem), толщину по-прежнему держит --gr-slider-track-height. Подсказка уходит вбок — над бегунком она легла бы на дорожку, — а подписи меток встают справа. aria-orientation следует пропу, клавиатура не меняется: ↑/→ увеличивают, ↓/← уменьшают.

lazy придерживает update:modelValue до конца жеста: во время перетаскивания бегунок ведёт внутреннее значение, а наружу уходит одно событие на отпускании (вместе с change). Это для дорогих пересчётов, которым незачем срабатывать на каждое движение мыши.

Клавиатура коммитит сразу и при lazy: нажатие клавиши дискретно, придерживать его нечего.

Не доехавший modelValue ставит бегунок на min и объясняется предупреждением в dev-режиме: иначе смещение и aria-valuenow ушли бы в NaN, а диктор прочитал бы его вслух.

marks — словарь { [value]: label } или массив значений. Подписи меток скрыты от скринридера (aria-hidden): значение он читает с самого бегунка, а подписи стали бы случайным текстом внутри слайдера.

formatTooltip управляет и подсказкой, и aria-valuetext — «$1 200» вместо голого «1200». Без своего формата aria-valuetext не выставляется: число самодостаточно.

Подписи меток отступают от бегунка, а не от дорожки: отступ — выступ ручки за дорожку плюс зазор, но не меньше штатного. Крупная ручка (--gr-slider-thumb-size вместе со слотом #thumb) поэтому не закрывает подписи даже стоя прямо на делении, а место под подписями растёт вместе с ней.

size — xs…lg, читается из GrConfigProvider. Точечная кастомизация — через переменные: --gr-slider-rail, --gr-slider-fill, --gr-slider-thumb-bg, --gr-slider-thumb-border, --gr-slider-thumb-size, --gr-slider-track-height, --gr-slider-length.

disabled гасит заливку, бегунок (вместе с его рамкой), подсказку и подписи меток токенами --gr-disabled-*, а не прозрачностью: opacity разбавляет выверенные на AA цвета текста.

invalid — свой или из ошибки GrFormField — красит заливку и рамку бегунка ролью --gr-invalid-brd, а кольцо фокуса — --gr-invalid-ring, как рамку у полей ввода. Недоступность сильнее ошибки.

Проп name рендерит input[type="hidden"] со значением; при range — два инпута с одним именем (lo, hi). Сериализуется модель (после снапа к step), а не черновик жеста при lazy.

Недоступный слайдер значение не отправляет — как нативный disabled контрол, GrSegmented и GrSwitch: скрытые инпуты (оба при range) получают disabled.