gog-slider

Slider

A form-control slider with label, min/max/step, an optional thumb-less range display, and full ControlValueAccessor support.

Overview

Import the component and drop it into a template.

import { SliderComponent } from '@guildofgleks/ui';

@Component({
  // ...
  imports: [SliderComponent],
})

Basic usage — a labeled slider bound with [(value)]:

0100

<gog-slider label="Volume" [min]="0" [max]="100" [step]="5" [(value)]="volume" />

Value: 45

Examples

Controls

step works at any scale, from whole numbers to fractional precision. [showThumb]="false" renders a bare filled track — a range indicator with no drag handle — and disabled combines with either.

0100

Volume is 45, brightness is 70, and precision is 0.45.

<gog-slider label="Volume" [min]="0" [max]="100" [step]="5" [(value)]="volume" />
<gog-slider label="Brightness" [min]="0" [max]="100" [step]="10" [(value)]="brightness" />
<gog-slider label="Precision" [min]="0" [max]="1" [step]="0.01" [(value)]="precision" />
<gog-slider
  label="Range only"
  [min]="0"
  [max]="100"
  [step]="1"
  [showThumb]="false"
  [value]="35"
/>
<gog-slider label="Disabled" [value]="25" [disabled]="true" [showThumb]="false" />
<gog-slider label="Disabled (with thumb)" [value]="60" [disabled]="true" />

Labeling

showValue="false" hides the numeric readout. With no label, use ariaLabel so assistive tech still gets a name.

0100

<gog-slider label="No value readout" [showValue]="false" [(value)]="hiddenValue" />
<gog-slider ariaLabel="Opacity (no visible label)" [(value)]="ariaOnlyValue" />

Full width

Full width of its container by default (see every slider above). A slider's track has no content of its own to shrink-wrap to, so [fullWidth]="false" instead sizes it to --gog-slider-auto-width (240px by default) — a fixed, themeable fallback rather than a content-derived one.

0100

<gog-slider label="Compact" [min]="0" [max]="100" [(value)]="compactValue" [fullWidth]="false" />

Vertical

The vertical variant is the same native <input type="range"> rotated with writing-mode, not a custom drag implementation — so dragging, touch and the keyboard (Up/Down as well as Left/Right) all keep working exactly as they do horizontally. The value increases upward, matching a volume-fader convention. --gog-slider-vertical-length sizes its length; fullWidth is ignored, since a vertical slider's width is its thickness.

0100

<gog-slider label="Bass" orientation="vertical" [min]="0" [max]="100" [(value)]="bass" />
<gog-slider label="Mid" orientation="vertical" [min]="0" [max]="100" [(value)]="mid" />
<gog-slider label="Treble" orientation="vertical" [min]="0" [max]="100" [(value)]="treble" />

Range — two thumbs 21.3.1

[range]="true" puts a second thumb on the track and switches the model from a number to a GogSliderRange — a { start, end } pair bound with [(rangeValue)]. The two models are mutually exclusive: with range on, value (and a form control's writeValue) is ignored, and vice versa.

0100

Selected: 20 – 70

Each thumb needs its own accessible name — a single <label> cannot be associated with two inputs through for. Unset, they fall back to "Minimum" and "Maximum", prefixed with label when there is one ("Price Minimum").

<gog-slider
  label="Price"
  [range]="true"
  [(rangeValue)]="priceRange"
  [min]="0"
  [max]="100"
  startAriaLabel="Lowest price"
  endAriaLabel="Highest price"
/>

Disabling one thumb 21.3.1

startDisabled / endDisabled pin one end of a range while the other stays movable. They are ORed with disabled rather than overriding it — disabled still means "both thumbs off" — and, unlike it, they do not dim the whole control or cut pointer events over the track, which would take the enabled thumb down with them.

0100

Floor pinned at 0; ceiling at 60.

<gog-slider
  label="Budget"
  [range]="true"
  [(rangeValue)]="cappedRange"
  [startDisabled]="true"
/>

Validation

errorMessage is consumer-controlled: gog-slider just renders whatever it's given, for as long as it's non-empty — this page recomputes it every time the value changes. Drag past 70 to see it.

0100

Over the recommended budget for this tier.

<gog-slider
  label="Monthly budget"
  [min]="0"
  [max]="100"
  [step]="5"
  [errorMessage]="budgetError()"
  [(value)]="budget"
/>

Reactive Forms — automatic error timing

With errorDisplay="auto" and a [formControl], the slider shows the error once it's been touched (drag it, then click elsewhere) and is invalid, instead of the page computing that timing.

0100

<gog-slider
  label="Minimum threshold"
  [min]="0"
  [max]="100"
  [formControl]="minimumControl"
  errorDisplay="auto"
  [errorMessage]="minimumErrorMessage()"
/>

API Reference

Inputs

Name	Type	Default	Description
`value`	`number (model)`	`0`	Two-way bindable value via [(value)]. Also driven by Angular Forms through writeValue/registerOnChange when used with formControlName/[formControl]/ngModel. Ignored while range is true.
`range`21.3.1	`boolean`	`false`	Switches to two-thumb mode for picking a range instead of a single value. Bind [(rangeValue)] instead of [(value)] — the two are mutually exclusive.
`rangeValue`21.3.1	`GogSliderRange (model)`	`{ start: 0, end: 100 }`	Two-way bindable { start, end } pair. Used only when range is true.
`startDisabled`21.3.1	`boolean`	`false`	Disables only the lower thumb in range mode — pinning a floor while the ceiling stays movable. ORed with disabled, never overriding it, and it does not dim the whole control the way disabled does.
`endDisabled`21.3.1	`boolean`	`false`	Disables only the upper thumb in range mode. Mirrors startDisabled.
`startAriaLabel`21.3.1	`string`	`'Minimum'`	Accessible name for the lower thumb, prefixed with label when one is set ('Price Minimum'). A shared <label> cannot be associated with two inputs via for, so each thumb needs its own name.
`endAriaLabel`21.3.1	`string`	`'Maximum'`	Accessible name for the upper thumb.
`label`	`string`	`''`	Field label.
`min`	`number`	`0`	Minimum value.
`max`	`number`	`100`	Maximum value.
`step`	`number`	`1`	Increment step, e.g. 0.01 for fine-grained values.
`showValue`	`boolean`	`true`	Shows the current numeric value next to the label.
`showThumb`	`boolean`	`true`	Set false to render a bare filled track — a range indicator with no drag handle.
`errorMessage`	`string`	`''`	Error text to display. Visibility is governed by errorDisplay.
`errorDisplay`	`'auto' \| 'manual'`	`GOG_CONFIG.control.errorDisplay ?? 'manual'`	'manual': shown for as long as errorMessage is non-empty — you decide the timing. 'auto': shown once the attached FormControl is touched and invalid; falls back to manual without one.
`ariaLabel`	`string`	`''`	Accessible name for the field when there is no visible label.
`disabled`	`boolean`	`false`	Disables dragging and keyboard input.
`fullWidth`	`boolean`	`true`	Fills its container by default. A track has no content of its own to shrink-wrap to, so [fullWidth]="false" instead sizes it to --gog-slider-auto-width (240px by default) — a fixed, themeable fallback rather than a content-derived one. Ignored when vertical, since a vertical slider’s width is its thickness, not its length.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Which way the track runs. Picked per instance — it is a layout decision rather than a house style, so there is no global default for it. A vertical slider takes its length from --gog-slider-vertical-length (160px).

Styling Tokens

Every CSS custom property the slider paints with. Override any of them — on a single instance, a subtree, or a theme — to restyle it. See the Theming guide for the full token-layering model, or the Theme Generator to tweak these live.

Token	Description
`--gog-slider-label-color / -value-color`	Label and current value.
`--gog-slider-track-bg / -fill-bg`	Track, empty and filled. The fill is applied as background rather than background-color, so -fill-bg also accepts a gradient.
`--gog-slider-track-border-width / -track-border-style / -track-border-color`	An optional border on the track — transparent by default, the same opt-in convention as --gog-btn-primary-border.
`--gog-slider-thumb-bg / -thumb-border / -thumb-shadow`	Drag handle.
`--gog-slider-auto-width / -vertical-length`	Size of a slider that does not fill its container: width when horizontal, length when vertical.
`--gog-slider-focus-ring`	Keyboard focus ring.