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

modules/@angular/forms/test/template_integration_spec.ts

@@ -20,7 +20,7 @@ export function main() {
       TestBed.configureTestingModule({
         declarations: [
           StandaloneNgModel, NgModelForm, NgModelGroupForm, NgModelValidBinding, NgModelNgIfForm,
-          NgModelRadioForm, NgModelSelectForm, NgNoFormComp, InvalidNgModelNoName,
+          NgModelRadioForm, NgModelRangeForm, NgModelSelectForm, NgNoFormComp, InvalidNgModelNoName,
           NgModelOptionsStandalone, NgModelCustomComp, NgModelCustomWrapper,
           NgModelValidationBindings, NgModelMultipleValidators, NgAsyncValidator,
           NgModelAsyncValidation
@@ -503,6 +503,26 @@ export function main() {
 
     });
 
+    describe('range control', () => {
+      it('should support <type=range>', fakeAsync(() => {
+           const fixture = TestBed.createComponent(NgModelRangeForm);
+           // model -> view
+           fixture.componentInstance.val = 4;
+           fixture.detectChanges();
+           tick();
+           let input = fixture.debugElement.query(By.css('input'));
+           expect(input.nativeElement.value).toBe('4');
+           fixture.detectChanges();
+           tick();
+           let newVal = '4';
+           input.triggerEventHandler('input', {target: {value: newVal}});
+           tick();
+           // view -> model
+           fixture.detectChanges();
+           expect(typeof(fixture.componentInstance.val)).toBe('number');
+         }));
+    });
+
     describe('radio controls', () => {
       it('should support <type=radio>', fakeAsync(() => {
            const fixture = TestBed.createComponent(NgModelRadioForm);
@@ -1023,6 +1043,11 @@ class NgModelOptionsStandalone {
   two: string;
 }
 
+@Component({selector: 'ng-model-range-form', template: '<input type="range" [(ngModel)]="val">'})
+class NgModelRangeForm {
+  val: any;
+}
+
 @Component({
   selector: 'ng-model-radio-form',
   template: `