CngxSlider
projects/common/interactive/slider/slider.component.ts
Import#
import { CngxSlider } from '@cngx/common/interactive'
Description#
Finished single-thumb slider. The 90% API: drop it in, bind [(value)], done -
it renders the track, fill, and thumb for you and wires the full APG keyboard
and pointer-drag through its CngxSliderTrack brain (applied as a host
directive). The value is a model<number>(), so it binds two-way in Angular
Signal Forms via [control]; the cngx-form-field integration lives in
@cngx/forms (CngxSliderFieldBridge).
Value display: showValue floats the formatted value permanently above the
thumb; showValueBubble shows it as a bubble only while the slider is focused
or dragged (Material-style). showTicks paints a step mark; showTickLabels
adds numeric labels (formatted through valueText); thumbGlyph projects your
own handle content; orientation="vertical" rotates the skin. Reach for the
headless CngxSliderTrack directive only when you need to own the skin;
use CngxRangeSlider for a two-thumb range.
<label id="vol">Volume</label>
<cngx-slider aria-labelledby="vol" [(value)]="volume" [min]="0" [max]="100" [step]="5" showValueBubble />Metadata#
Host#
Dependencies#
CngxSliderTrackinject()brainThe brain host directive - exposes the derived value/fraction the skin reads.
Relationships
Depends on1
Index#
Inputs#
Render a numeric label at every step stop (independent of showTicks).
false, { transform: booleanAttribute }Paint a tick mark every step along the track.
false, { transform: booleanAttribute }Float the formatted current value permanently above the thumb (visual only).
false, { transform: booleanAttribute }Show the formatted value as a bubble only while focused / dragged (visual only).
false, { transform: booleanAttribute }TemplateRef | null Optional content projected into the thumb (an icon, a dot, a custom handle).
nullInstance Properties#
unknownTick marks + labels derivation (shared factory).
createSliderTicks({
min: this.brain.min,
max: this.brain.max,
step: this.brain.step,
marks: this.showTicks,
labels: this.showTickLabels,
})Methods#
HostBindings#
| Binding | Expression |
|---|---|
[class.cngx-slider--ticks] | showTicks() |
[class.cngx-slider--bubble] | showValueBubble() |
[style.--cngx-slider-tick-interval] | ticks.interval() |