refactor(angular): apply range to numeric value accessor (#29029)

Issue number: Internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The ticket describes renaming `TextValueAccessorDirective` since
`ion-range` is not a text-based control, however I think this was an
incorrect assumption made during the original implementation.

`ion-range` is a numeric based value accessor (either as a single number
or an object accepting a numeric start/end value).

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Migrates the usage of `ion-range` value accessor implementation to the
`NumericValueAccessorDirective`
- Adds tests for validating the value accessor is functioning as
expected

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

packages/angular/test/base/e2e/src/lazy/inputs.spec.ts

@@ -10,6 +10,7 @@ describe('Inputs', () => {
     cy.get('ion-input').should('have.prop', 'value').and('equal', 'some text');
     cy.get('ion-datetime').should('have.prop', 'value').and('equal', '1994-03-15');
     cy.get('ion-select').should('have.prop', 'value').and('equal', 'nes');
+    cy.get('ion-range').should('have.prop', 'value').and('equal', 50);
   });
 
   it('should have reset value', () => {
@@ -27,6 +28,7 @@ describe('Inputs', () => {
     cy.get('ion-input').should('not.have.prop', 'value');
     cy.get('ion-datetime').should('not.have.prop', 'value');
     cy.get('ion-select').should('not.have.prop', 'value');
+    cy.get('ion-range').should('not.have.prop', 'value');
   });
 
   it('should get some value', () => {
@@ -39,6 +41,7 @@ describe('Inputs', () => {
     cy.get('ion-input').should('have.prop', 'value').and('equal', 'some text');
     cy.get('ion-datetime').should('have.prop', 'value').and('equal', '1994-03-15');
     cy.get('ion-select').should('have.prop', 'value').and('equal', 'nes');
+    cy.get('ion-range').should('have.prop', 'value').and('equal', 50);
   });
 
   it('change values should update angular', () => {

packages/angular/test/base/src/app/lazy/inputs/inputs.component.html

@@ -99,6 +99,12 @@
       <ion-note slot="end">{{radio}}</ion-note>
     </ion-item>
 
+    <ion-item>
+      <ion-range [(ngModel)]="range" min="0" max="100" id="first-range">
+        <ion-label slot="start">Range</ion-label>
+      </ion-range>
+    </ion-item>
+
   </ion-list>
   <p>
     <ion-button (click)="setValues()" id="set-button">Set values</ion-button>

packages/angular/test/base/src/app/lazy/inputs/inputs.component.ts

@@ -13,6 +13,7 @@ export class InputsComponent {
   toggle = true;
   select? = 'nes';
   changes = 0;
+  range? = 50;
 
   setValues() {
     console.log('set values');
@@ -22,6 +23,7 @@ export class InputsComponent {
     this.radio = 'nes';
     this.toggle = true;
     this.select = 'nes';
+    this.range = 50;
   }
 
   resetValues() {
@@ -32,6 +34,7 @@ export class InputsComponent {
     this.radio = undefined;
     this.toggle = false;
     this.select = undefined;
+    this.range = undefined;
   }
 
   counter() {