feat(forms) range values need to be numbers instead of strings (#11792)

modules/@angular/forms/src/directives.ts

@@ -16,6 +16,7 @@ import {NgModel} from './directives/ng_model';
 import {NgModelGroup} from './directives/ng_model_group';
 import {NumberValueAccessor} from './directives/number_value_accessor';
 import {RadioControlValueAccessor} from './directives/radio_control_value_accessor';
+import {RangeValueAccessor} from './directives/range_value_accessor';
 import {FormControlDirective} from './directives/reactive_directives/form_control_directive';
 import {FormControlName} from './directives/reactive_directives/form_control_name';
 import {FormGroupDirective} from './directives/reactive_directives/form_group_directive';
@@ -34,6 +35,7 @@ export {NgModel} from './directives/ng_model';
 export {NgModelGroup} from './directives/ng_model_group';
 export {NumberValueAccessor} from './directives/number_value_accessor';
 export {RadioControlValueAccessor} from './directives/radio_control_value_accessor';
+export {RangeValueAccessor} from './directives/range_value_accessor';
 export {FormControlDirective} from './directives/reactive_directives/form_control_directive';
 export {FormControlName} from './directives/reactive_directives/form_control_name';
 export {FormGroupDirective} from './directives/reactive_directives/form_group_directive';
@@ -44,9 +46,9 @@ export {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValida
 
 export const SHARED_FORM_DIRECTIVES: Type<any>[] = [
   NgSelectOption, NgSelectMultipleOption, DefaultValueAccessor, NumberValueAccessor,
-  CheckboxControlValueAccessor, SelectControlValueAccessor, SelectMultipleControlValueAccessor,
-  RadioControlValueAccessor, NgControlStatus, NgControlStatusGroup, RequiredValidator,
-  MinLengthValidator, MaxLengthValidator, PatternValidator
+  RangeValueAccessor, CheckboxControlValueAccessor, SelectControlValueAccessor,
+  SelectMultipleControlValueAccessor, RadioControlValueAccessor, NgControlStatus,
+  NgControlStatusGroup, RequiredValidator, MinLengthValidator, MaxLengthValidator, PatternValidator
 ];
 
 export const TEMPLATE_DRIVEN_DIRECTIVES: Type<any>[] = [NgModel, NgModelGroup, NgForm];

modules/@angular/forms/src/directives/range_value_accessor.ts

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Directive, ElementRef, Provider, Renderer, forwardRef} from '@angular/core';
+
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
+
+export const RANGE_VALUE_ACCESSOR: Provider = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => RangeValueAccessor),
+  multi: true
+};
+
+/**
+ * The accessor for writing a range value and listening to changes that is used by the
+ * {@link NgModel}, {@link FormControlDirective}, and {@link FormControlName} directives.
+ *
+ *  ### Example
+ *  ```
+ *  <input type="range" [(ngModel)]="age" >
+ *  ```
+ */
+@Directive({
+  selector:
+      'input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]',
+  host: {
+    '(change)': 'onChange($event.target.value)',
+    '(input)': 'onChange($event.target.value)',
+    '(blur)': 'onTouched()'
+  },
+  providers: [RANGE_VALUE_ACCESSOR]
+})
+export class RangeValueAccessor implements ControlValueAccessor {
+  onChange = (_: any) => {};
+  onTouched = () => {};
+
+  constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
+
+  writeValue(value: any): void {
+    this._renderer.setElementProperty(this._elementRef.nativeElement, 'value', parseFloat(value));
+  }
+
+  registerOnChange(fn: (_: number) => void): void {
+    this.onChange = (value) => { fn(value == '' ? null : parseFloat(value)); };
+  }
+
+  registerOnTouched(fn: () => void): void { this.onTouched = fn; }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._renderer.setElementProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
+  }
+}

modules/@angular/forms/src/directives/shared.ts

@@ -22,6 +22,7 @@ import {NgControl} from './ng_control';
 import {normalizeAsyncValidator, normalizeValidator} from './normalize_validator';
 import {NumberValueAccessor} from './number_value_accessor';
 import {RadioControlValueAccessor} from './radio_control_value_accessor';
+import {RangeValueAccessor} from './range_value_accessor';
 import {FormArrayName} from './reactive_directives/form_group_name';
 import {SelectControlValueAccessor} from './select_control_value_accessor';
 import {SelectMultipleControlValueAccessor} from './select_multiple_control_value_accessor';
@@ -130,6 +131,7 @@ export function isPropertyUpdated(changes: {[key: string]: any}, viewModel: any)
 export function isBuiltInAccessor(valueAccessor: ControlValueAccessor): boolean {
   return (
       hasConstructor(valueAccessor, CheckboxControlValueAccessor) ||
+      hasConstructor(valueAccessor, RangeValueAccessor) ||
       hasConstructor(valueAccessor, NumberValueAccessor) ||
       hasConstructor(valueAccessor, SelectControlValueAccessor) ||
       hasConstructor(valueAccessor, SelectMultipleControlValueAccessor) ||