CngxSliderThumb

Directivev0.1.0WCAG AA

projects/common/interactive/slider/slider-thumb.directive.ts

Info
API

Import#

import { CngxSliderThumb } from '@cngx/common/interactive'

Description#

One focusable thumb of a CngxRangeSlider. Place cngxSliderThumb on each thumb element with "start" or "end"; the directive turns it into an independent role="slider" with its own aria-valuenow/valuetext and APG keyboard, bounded by the sibling thumb so the two can never cross. It reads the shared track config from CNGX_SLIDER_RANGE (injected up the element-injector hierarchy) and commits its end through the host.

Two focusable thumbs cannot be derived from a single host element, so each thumb is its own directive - the headless contract the skin marks up.

Metadata#

Selector: [cngxSliderThumb]
Export as: cngxSliderThumb

Host#

Static attributes: roleslider
[attr.aria-valuemin]bounds().min()
[attr.aria-valuemax]bounds().max()
[attr.aria-valuenow]core.clampedValue()
[attr.aria-valuetext]core.ariaValueText()
[attr.aria-orientation]range.orientation()
[attr.aria-disabled]range.disabled() || null
[attr.tabindex]range.disabled() ? -1 : 0
Bound styles: touch-action ← 'none' --cngx-slider-fraction ← core.fraction()
Listeners: keydown → interaction.handleKeydown($event) pointerdown → interaction.handlePointerDown($event) pointermove → interaction.handlePointerMove($event) pointerup → interaction.handlePointerUp($event) pointercancel → interaction.handlePointerUp($event)

Dependencies#

CNGX_SLIDER_RANGEinject()range

Relationships

Used by1

componentCngxRangeSliderFinished two-thumb (range) slider.

Index#

Inputs#

position#CngxSliderThumbPosition

input()Required

Which end of the range this thumb drives. Bound from the selector.

default { alias: 'cngxSliderThumb' }

Instance Properties#

core#unknown

ProtectedReadonly

Shared value/step/aria derivation, bounded by the sibling thumb.

createSliderCore({
  value: this.value,
  min: this.range.min,
  max: this.range.max,
  step: this.range.step,
  boundedMin: computed(() => this.bounds().min()),
  boundedMax: computed(() => this.bounds().max()),
  valueText: (v) => {
    const format = this.range.valueText();
    return format ? format(v) : String(v);
  },
})

interaction#unknown

ProtectedReadonly

createSliderInteraction({
  core: this.core,
  el: this.el,
  disabled: () => this.range.disabled(),
  pageStep: () => this.pageStep(),
  fractionFromPointer: (x, y) => this.range.fractionFromPointer(x, y),
})

HostBindings#

Binding	Expression
`[attr.aria-valuemin]`	`bounds().min()`
`[attr.aria-valuemax]`	`bounds().max()`
`[attr.aria-valuenow]`	`core.clampedValue()`
`[attr.aria-valuetext]`	`core.ariaValueText()`
`[attr.aria-orientation]`	`range.orientation()`
`[attr.aria-disabled]`	`range.disabled() \|\| null`
`[attr.tabindex]`	`range.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()`

CngxSliderThumb

Import#

Description#

Related#

Metadata#

Host#

Dependencies#

Relationships

Used by1

Index#

Properties

Inputs

Derived State

HostBindings

HostListeners

Inputs#

Instance Properties#

HostBindings#

HostListeners#