RangeValueAccessor

The ControlValueAccessor for writing a range value and listening to range input changes. The value accessor is used by the FormControlDirective, FormControlName, and NgModel directives.

NgModules

• ReactiveFormsModule

• FormsModule

Selectors

• input[type=range][formControlName]
• input[type=range][formControl]
• input[type=range][ngModel]

Properties

Property	Description
onChange: (_: any) => { }	The registered callback function called when a change or input event occurs on the input element.
onTouched: () => { }	The registered callback function called when a blur event occurs on the input element.

Description

Using a range input with a reactive form

The following example shows how to use a range input with a reactive form.

const ageControl = new FormControl();

<input type="range" [formControl]="ageControl">

Methods

writeValue()
Sets the "value" property on the input element.
writeValue(value: any): void Parameters value any The checked value Returns void

registerOnChange()
Registers a function called when the control value changes.
registerOnChange(fn: (_: number) => void): void Parameters fn (_: number) => void The callback function Returns void

registerOnTouched()
Registers a function called when the control is touched.
registerOnTouched(fn: () => void): void Parameters fn () => void The callback function Returns void

setDisabledState()
Sets the "disabled" property on the range input element.
setDisabledState(isDisabled: boolean): void Parameters isDisabled boolean The disabled value Returns void