CngxRangeSliderFieldBridge

DirectivePrimaryv0.1.0WCAG AA

projects/forms/field/range-slider-field-bridge.directive.ts

Import#

import { CngxRangeSliderFieldBridge } from '@cngx/forms/field'

Description#

Bridges a <cngx-range-slider> (or a bare [cngxRangeSliderTrack]) into a <cngx-form-field>.

Same-element on the range-slider host. Provides CNGX_FORM_FIELD_CONTROL so the presenter discovers the slider, two-way-syncs the bound Field<[number, number]> value with the slider's tuple value model, and projects ARIA from the presenter onto the host. The slider atom stays Forms-agnostic - this directive is the only place that imports from @cngx/forms/field.

Usage

<cngx-form-field [field]="form.priceRange">
  <label cngxLabel>Price range</label>
  <cngx-range-slider cngxRangeSliderFieldBridge [min]="0" [max]="1000" [step]="10" />
</cngx-form-field>

https://cngxjs.github.io/cngx/examples/#/forms/field/slider-forms/signal-forms-range-slider

Metadata#

Selector: [cngxRangeSliderFieldBridge]
Export as: cngxRangeSliderFieldBridge
Implements: CngxFormFieldControl

Host#

Static attributes: [id]id()
[attr.aria-describedby]describedBy()
[attr.aria-labelledby]labelledBy()
[attr.aria-invalid]ariaInvalid()
[attr.aria-required]ariaRequired()
[attr.aria-busy]ariaBusy()
[attr.aria-errormessage]ariaErrorMessage()
[attr.aria-readonly]ariaReadonly()
Listeners: focusin → handleFocus focusout → handleBlur

Providers#

CNGX_FORM_FIELD_CONTROL: useExisting CngxRangeSliderFieldBridge

Relationships

Depends on1

CNGX_FORM_FIELD_CONTROLservice

Index#

Instance Properties#

focused#unknown

Readonly

this.focusedState.asReadonly()

HostBindings#

Binding	Expression
`[id]`	`id()`
`[attr.aria-describedby]`	`describedBy()`
`[attr.aria-labelledby]`	`labelledBy()`
`[attr.aria-invalid]`	`ariaInvalid()`
`[attr.aria-required]`	`ariaRequired()`
`[attr.aria-busy]`	`ariaBusy()`
`[attr.aria-errormessage]`	`ariaErrorMessage()`
`[attr.aria-readonly]`	`ariaReadonly()`

HostListeners#

Event	Handler
`(focusin)`	`focusin()`
`(focusout)`	`focusout()`

CngxRangeSliderFieldBridge

Import#

Description#

Usage#

Related#