CngxRangeSliderTrack
projects/common/interactive/slider/range-slider.directive.ts
Import#
import { CngxRangeSliderTrack } from '@cngx/common/interactive'
Description#
Headless dual-thumb (range) slider brain. Put cngxRangeSliderTrack on your
own track container and host two CngxSliderThumb children
(start / end); the value is a model<[number, number]>() tuple this
directive owns. It provides CNGX_SLIDER_RANGE so each thumb reads the
shared config, learns its sibling-clamped bounds, and commits its end. The
thumbs cannot cross because boundsFor narrows each thumb's range to
the other thumb's current value - clamp math, not an effect (Pillar 1).
Most consumers want the finished CngxRangeSlider component
(<cngx-range-slider>) which renders the track, fill band, and both thumbs
and uses this directive as its brain. Reach for cngxRangeSliderTrack only
when you want to own the skin markup.
<div cngxRangeSliderTrack role="group" aria-label="Price range" [(value)]="price" [min]="0" [max]="1000">
<span class="cngx-slider__track"></span>
<span cngxSliderThumb="start" aria-label="Minimum"></span>
<span cngxSliderThumb="end" aria-label="Maximum"></span>
</div>Metadata#
Host#
Providers#
CNGX_SLIDER_RANGE- useExisting
CngxRangeSliderTrack
Relationships
Depends on1
Index#
Properties
Outputs
Derived State
Inputs#
number | undefinedPage-key jump size for both thumbs (absolute, not a step multiple). Defaults to the larger of one step and a tenth of the range.
[number, number]Two-way [start, end] tuple - the single source of truth for both thumbs.
[0, 100]Outputs#
[number, number]Two-way [start, end] tuple - the single source of truth for both thumbs.
Instance Properties#
unknownOptional aria-valuetext formatter shared across both thumbs.
input<((value: number) => string) | undefined>(undefined)Methods#
commit(position: CngxSliderThumbPosition, value: number)HostBindings#
| Binding | Expression |
|---|---|
[attr.aria-disabled] | disabled() || null |
[attr.aria-orientation] | orientation() |
[style.--cngx-slider-start-fraction] | startFraction() |
[style.--cngx-slider-end-fraction] | endFraction() |