API: Primitives

RangeSliderDirective

Two-thumb slider root.

Overview

Two-thumb slider root. The model is two signals, low and high (two-way bindable as [(low)] / [(high)]); the canonical combined value is { low, high }.

Invariants (applied to whatever is written to the models): both values are snapped to the step grid within min..max, and high - low >= minDistance with low <= high. When an external write breaks them, high wins and low is pulled back (or high pushed up at min). A user action moves only the thumb it targets, clamped against the other; it never moves both.

valueChangeCommitted fires once per user change. Programmatic writes are silent.

Kind: Directive
Export as: qzRangeSlider
Source: packages/primitives/src/range-slider/range-slider.directive.ts:61

Selector

[qzRangeSlider]

Inputs

Input	Type	Default	Description
`min`	`number`	`DEFAULT_RANGE_SLIDER_CONFIG.min`
`max`	`number`	`DEFAULT_RANGE_SLIDER_CONFIG.max`
`step`	`number`	`DEFAULT_RANGE_SLIDER_CONFIG.step`
`minDistance`	`number`	`DEFAULT_RANGE_SLIDER_CONFIG.minDistance`
`disabled`	`unknown`	`false`	Transform `booleanAttribute`; reads as `boolean`.
`orientation`	`SliderOrientation`	`DEFAULT_RANGE_SLIDER_CONFIG.orientation`
`valueText`	`((value: number, thumb: RangeSliderThumbName) => string) \| null`	`null`

Models

Two-way bindings: each model is an input and emits the matching change output.

Model	Type	Default	Change output
`low`	`number`	`DEFAULT_RANGE_SLIDER_CONFIG.min`	`lowChange`
`high`	`number`	`DEFAULT_RANGE_SLIDER_CONFIG.max`	`highChange`
`dragging`	`boolean`	`false`	`draggingChange`

Outputs

Output	Payload	Description
`valueChangeCommitted`	`RangeSliderValue`	Emits the new `{ low, high }` once per user change.

Properties

Name	Type	Description
`readonly activeThumb`	`WritableSignal<RangeSliderThumbName \| null>`	Thumb being dragged by the active pointer gesture, or `null`.
`readonly isDisabled`	`Signal<boolean>`	Effective disabled state: the `disabled` input OR a disabled Angular Forms control.
`readonly bounds`	`Signal<{ min: number; max: number; }>`
`readonly distance`	`Signal<number>`	`minDistance` repaired to `0..(max - min)`.
`readonly range`	`Signal<RangeSliderValue>`	Effective, constraint-satisfying values.
`readonly lowMax`	`Signal<number>`	Highest value the low thumb may take (`high - minDistance`, on the step grid).
`readonly highMin`	`Signal<number>`	Lowest value the high thumb may take (`low + minDistance`, on the step grid).
`readonly lowPercent`	`Signal<number>`
`readonly highPercent`	`Signal<number>`

Public methods

setThumb

setThumb(thumb: RangeSliderThumbName, value: number): void

User command for one thumb: clamps against the other thumb, writes its model, emits on change.

Parameter	Type	Optional	Description
`thumb`	`RangeSliderThumbName`
`value`	`number`

thumbValue

thumbValue(thumb: RangeSliderThumbName): number

Thumb value after a key step; used by the thumb directive.

Parameter	Type	Optional	Description
`thumb`	`RangeSliderThumbName`

writeFormValue

writeFormValue(value: RangeSliderValue | null | undefined): void

Adapter hook for @quartz-headless/primitives/forms: silent, null resets to the full range.

Parameter	Type	Optional	Description
`value`	`RangeSliderValue \| null \| undefined`

setFormDisabled

setFormDisabled(disabled: boolean): void

Adapter hook for @quartz-headless/primitives/forms (setDisabledState).

Parameter	Type	Optional	Description
`disabled`	`boolean`

onPointerDown

onPointerDown(event: PointerEvent): void

Parameter	Type	Optional	Description
`event`	`PointerEvent`

onPointerMove

onPointerMove(event: PointerEvent): void

Parameter	Type	Optional	Description
`event`	`PointerEvent`

onPointerEnd

onPointerEnd(event: PointerEvent): void

Parameter	Type	Optional	Description
`event`	`PointerEvent`