GrSlider

<GrSlider v-model="temperature" :marks="{ 16: 'cold', 30: 'hot' }">
  <template #thumb="{ value }">{{ value }}</template>
  <template #mark="{ label, active }">
    <span :class="active ? 'text-[var(--gr-primary-text)]' : ''">{{ label }}</span>
  </template>
</GrSlider>

#thumb is rendered inside the thumb rather than instead of it. Its node carries role="slider", tabindex, eight aria-* — including aria-valuemin and aria-valuemax, which for a range are computed from the neighbouring thumb — plus the keyboard handler and the positioning. Handing that markup to the consumer would mean handing over the whole widget contract with it.

The look of the thumb itself is meanwhile changed with the --gr-slider-thumb-bg, -border and -size tokens, so “a completely different thumb” is assembled from the “tokens + slot” pair. The tooltip with the value stays beside the slot rather than being displaced by it.

#mark receives active — whether the mark has fallen into the filled part. That is what the slot is most often taken for: it cannot be computed from the outside, the model does not reach the scope otherwise. For a range the filled part is the stretch between the thumbs rather than from zero, so a mark to the left of the first thumb does not count as passed — active is computed the same way as the fill itself.

The label of a mark stays aria-hidden: a screen reader reads the value from the thumb, and a second text inside the slider only gets in its way.

The text of the tooltip is set by formatTooltip rather than by a slot: a string is needed there, not markup — the tooltip lives on top of the thumb and has no layout of its own.

<GrSlider v-model="range" range :min="0" :max="100" aria-label="Budget" />

The model is a [lo, hi] tuple; the thumbs do not jump over each other. A click on the track moves the nearest thumb, and when both have converged into one point — the one in whose direction the click happened: otherwise a collapsed range could not be pulled apart with the mouse.

Every thumb gets a name of its own: ariaLabel plus the bound from the locale (gr.slider.min / gr.slider.max) — “Budget (minimum)”.

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

In a vertical track the minimum is at the bottom. The length is set by --gr-slider-length (10rem by default), and the thickness is still held by --gr-slider-track-height. The tooltip moves to the side — above the thumb it would lie on the track — and the labels of the marks stand on the right. aria-orientation follows the prop, and the keyboard does not change: ↑/→ increase, ↓/← decrease.

lazy holds update:modelValue back until the end of a gesture: during the drag the thumb is run by an internal value, and one event goes out on release (together with change). That is for expensive recomputations that have no reason to fire on every movement of the mouse.

The keyboard commits at once even with lazy: a key press is discrete, and there is nothing to hold back.

A modelValue that did not arrive puts the thumb at min and is explained with a warning in dev mode: otherwise the offset and aria-valuenow would go to NaN, and a screen reader would read it aloud.

marks is a { [value]: label } dictionary or an array of values. The labels of the marks are hidden from a screen reader (aria-hidden): it reads the value from the thumb itself, and the labels would become random text inside the slider.

formatTooltip governs both the tooltip and aria-valuetext — “$1,200” instead of a bare “1200”. Without a format of your own aria-valuetext is not set: the number is self-sufficient.

The labels of the marks are offset from the thumb rather than from the track: the offset is how far the thumb sticks out beyond the track plus a gap, but never less than the standard one. A large thumb (--gr-slider-thumb-size together with the #thumb slot) therefore does not cover the labels even when it stands right on a mark, and the room under the labels grows with it.

size is xs…lg and is read from GrConfigProvider. Pointed customisation goes through the variables: --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 dims the fill, the thumb (together with its border), the tooltip and the labels of the marks with the --gr-disabled-* tokens rather than with transparency: opacity dilutes text colours tuned to AA.

invalid — its own or one from a GrFormField error — paints the fill and the border of the thumb with the --gr-invalid-brd role, and the focus ring with --gr-invalid-ring, like the border of the input fields. Being unavailable is stronger than an error.

The name prop renders an input[type="hidden"] with the value; with range there are two inputs with one name (lo, hi). What is serialised is the model (after snapping to step) rather than the draft of a gesture with lazy.

An unavailable slider does not send its value — like a native disabled control, GrSegmented and GrSwitch: the hidden inputs (both of them with range) get disabled.