CngxRangeSlider
projects/common/interactive/slider/range-slider.component.ts
Import#
import { CngxRangeSlider } from '@cngx/common/interactive'
Description#
Finished two-thumb (range) slider. Drop it in, bind [(value)] to a
[number, number] tuple - it renders the track, the fill band between the
thumbs, and both draggable handles, and wires the full APG keyboard +
pointer-drag through its CngxRangeSliderTrack brain. The thumbs cannot
cross because the brain clamps each to the other.
showValue floats a single start - end label between the thumbs (so the two
never overlap); showTicks paints a step tick along the track; thumbGlyph
projects content into both handles; orientation="vertical" rotates the skin.
Reach for the headless CngxRangeSliderTrack directive only when you
need to own the skin markup; use CngxSlider for a single thumb.
<cngx-range-slider aria-label="Price" [(value)]="price" [min]="0" [max]="1000" [step]="10" />Metadata#
Host#
Dependencies#
Relationships
Index#
Properties
Methods
Derived State
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 }Render the formatted start - end values centred between the thumbs (visual only).
false, { transform: booleanAttribute }Show the combined start - end value as a bubble only while focused / dragged.
false, { transform: booleanAttribute }Instance 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() |