CngxSliderTrack
projects/common/interactive/slider/slider.directive.ts
Import#
import { CngxSliderTrack } from '@cngx/common/interactive'
Description#
Headless single-thumb slider brain. Put cngxSliderTrack on your own track
element and the directive turns it into an APG-conformant role="slider":
full keyboard (Arrow / Page / Home / End), pointer-drag with capture, and the
whole ARIA value surface (aria-valuemin/max/now/valuetext/orientation)
computed from value/min/max/step. The value is a model<number>(),
so Angular Signal Forms binds it two-way via [control] with no forms import.
Most consumers want the finished CngxSlider component (<cngx-slider>)
which renders the track / fill / thumb for you and uses this directive as its
brain. Reach for cngxSliderTrack only when you want to own the skin markup.
Positioning is left to the skin: the directive publishes the thumb position
as the inherited custom property --cngx-slider-fraction (0..1), which the
track / fill / thumb read. The default look ships as Track-B CSS in
@cngx/themes/cngx.css.
<label id="vol-label">Volume</label>
<div cngxSliderTrack aria-labelledby="vol-label" [(value)]="volume" [min]="0" [max]="11">
<span class="cngx-slider__track"><span class="cngx-slider__fill"></span></span>
<span class="cngx-slider__thumb"></span>
</div>Reach for CngxRangeSliderTrack when you need two thumbs (a min/max range).
Metadata#
Host#
Index#
Outputs
HostBindings
HostListeners
Inputs#
Whether the slider is disabled (blocks keyboard and pointer, tabindex=-1).
falsenumber | undefinedPage-key jump size (absolute, not a step multiple). Defaults to the larger of one step and a tenth of the range.
"horizontal" | "vertical"Track axis. Drives aria-orientation and the pointer-to-fraction math.
'horizontal'Outputs#
Instance Properties#
unknownShared value/step/aria derivation.
createSliderCore({
value: this.value,
min: this.min,
max: this.max,
step: this.step,
valueText: (v) => {
const format = this.valueText();
return format ? format(v) : String(v);
},
})unknownSnapped + clamped value (aria-valuenow). For a skin to read.
this.core.clampedValueunknownFormatted display string (aria-valuetext). For a visible value label.
this.core.ariaValueTextunknownThumb position along the track in [0, 1]. For a skin to read.
this.core.fractionunknownShared keyboard + pointer-drag handlers (same factory the range thumb uses).
createSliderInteraction({
core: this.core,
el: this.el,
disabled: () => this.disabled(),
pageStep: () => this.pageStep(),
fractionFromPointer: (x, y) => pointerFraction(this.el, this.orientation(), x, y),
})unknownOptional aria-valuetext formatter (currency, dates, named stops).
input<((value: number) => string) | undefined>(undefined)HostBindings#
| Binding | Expression |
|---|---|
[attr.aria-valuemin] | min() |
[attr.aria-valuemax] | max() |
[attr.aria-valuenow] | core.clampedValue() |
[attr.aria-valuetext] | core.ariaValueText() |
[attr.aria-orientation] | orientation() |
[attr.aria-disabled] | disabled() || null |
[attr.tabindex] | disabled() ? -1 : 0 |
[style.touch-action] | 'none' |
[style.--cngx-slider-fraction] | core.fraction() |
HostListeners#
| Event | Handler |
|---|---|
(keydown) | keydown() |
(pointerdown) | pointerdown() |
(pointermove) | pointermove() |
(pointerup) | pointerup() |
(pointercancel) | pointercancel() |