diff --git a/core/stencil.config.ts b/core/stencil.config.ts
index 0107c8f76b..b3c2eec650 100644
--- a/core/stencil.config.ts
+++ b/core/stencil.config.ts
@@ -201,13 +201,13 @@ export const config: Config = {
           externalEvent: 'ionChange'
         },
         {
-          elements: ['ion-datetime', 'ion-radio-group', 'ion-radio', 'ion-range', 'ion-segment', 'ion-segment-button', 'ion-select', 'ion-accordion-group'],
+          elements: ['ion-datetime', 'ion-radio-group', 'ion-radio', 'ion-segment', 'ion-segment-button', 'ion-select', 'ion-accordion-group'],
           targetAttr: 'value',
           event: 'v-ion-change',
           externalEvent: 'ionChange'
         },
         {
-          elements: ['ion-input', 'ion-searchbar', 'ion-textarea'],
+          elements: ['ion-input', 'ion-searchbar', 'ion-textarea', 'ion-range'],
           targetAttr: 'value',
           event: 'v-ion-input',
           externalEvent: 'ionInput'
diff --git a/packages/angular/src/directives/control-value-accessors/select-value-accessor.ts b/packages/angular/src/directives/control-value-accessors/select-value-accessor.ts
index 7e2683edaf..254d4bac3a 100644
--- a/packages/angular/src/directives/control-value-accessors/select-value-accessor.ts
+++ b/packages/angular/src/directives/control-value-accessors/select-value-accessor.ts
@@ -4,7 +4,7 @@ import { ValueAccessor } from '@ionic/angular/common';
 
 @Directive({
   /* tslint:disable-next-line:directive-selector */
-  selector: 'ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime',
+  selector: 'ion-select, ion-radio-group, ion-segment, ion-datetime',
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -20,12 +20,7 @@ export class SelectValueAccessorDirective extends ValueAccessor {
 
   @HostListener('ionChange', ['$event.target'])
   _handleChangeEvent(
-    el:
-      | HTMLIonRangeElement
-      | HTMLIonSelectElement
-      | HTMLIonRadioGroupElement
-      | HTMLIonSegmentElement
-      | HTMLIonDatetimeElement
+    el: HTMLIonSelectElement | HTMLIonRadioGroupElement | HTMLIonSegmentElement | HTMLIonDatetimeElement
   ): void {
     this.handleValueChange(el, el.value);
   }
diff --git a/packages/angular/src/directives/control-value-accessors/text-value-accessor.ts b/packages/angular/src/directives/control-value-accessors/text-value-accessor.ts
index f4b52198cf..14395dfeb4 100644
--- a/packages/angular/src/directives/control-value-accessors/text-value-accessor.ts
+++ b/packages/angular/src/directives/control-value-accessors/text-value-accessor.ts
@@ -2,8 +2,9 @@ import { ElementRef, Injector, Directive, HostListener } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ValueAccessor } from '@ionic/angular/common';
 
+// TODO(FW-5495): rename class since range isn't a text component
 @Directive({
-  selector: 'ion-input:not([type=number]),ion-textarea,ion-searchbar',
+  selector: 'ion-input:not([type=number]),ion-textarea,ion-searchbar,ion-range',
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -18,7 +19,9 @@ export class TextValueAccessorDirective extends ValueAccessor {
   }
 
   @HostListener('ionInput', ['$event.target'])
-  _handleInputEvent(el: HTMLIonInputElement | HTMLIonTextareaElement | HTMLIonSearchbarElement): void {
+  _handleInputEvent(
+    el: HTMLIonInputElement | HTMLIonTextareaElement | HTMLIonSearchbarElement | HTMLIonRangeElement
+  ): void {
     this.handleValueChange(el, el.value);
   }
 }
diff --git a/packages/angular/standalone/src/directives/range.ts b/packages/angular/standalone/src/directives/range.ts
index f77beecbe4..2195d06f6c 100644
--- a/packages/angular/standalone/src/directives/range.ts
+++ b/packages/angular/standalone/src/directives/range.ts
@@ -88,8 +88,8 @@ export class IonRange extends ValueAccessor implements OnInit {
     proxyInputs(IonRange, RANGE_INPUTS);
   }
 
-  @HostListener('ionChange', ['$event.target'])
-  handleIonChange(el: HTMLIonRangeElement): void {
+  @HostListener('ionInput', ['$event.target'])
+  handleIonInput(el: HTMLIonRangeElement): void {
     this.handleValueChange(el, el.value);
   }
 }
diff --git a/packages/angular/test/base/src/app/lazy/form-controls/range/range.component.html b/packages/angular/test/base/src/app/lazy/form-controls/range/range.component.html
index 2dab1a129c..e57be8c060 100644
--- a/packages/angular/test/base/src/app/lazy/form-controls/range/range.component.html
+++ b/packages/angular/test/base/src/app/lazy/form-controls/range/range.component.html
@@ -11,6 +11,7 @@
           <div slot="label">Range</div>
         </ion-range>
       </ion-item>
+      <p>Value: {{ form.controls['range'].value }}</p>
     </ion-list>
     <ion-button type="submit">Submit</ion-button>
   </form>
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index 0cfc606724..de9aebb8b9 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -630,7 +630,7 @@ export const IonRange = /*@__PURE__*/ defineContainer<JSX.IonRange, JSX.IonRange
   'ionKnobMoveStart',
   'ionKnobMoveEnd'
 ],
-'value', 'v-ion-change', 'ionChange');
+'value', 'v-ion-input', 'ionInput');
 
 
 export const IonRefresher = /*@__PURE__*/ defineContainer<JSX.IonRefresher>('ion-refresher', defineIonRefresher, [
diff --git a/packages/vue/test/base/src/router/index.ts b/packages/vue/test/base/src/router/index.ts
index a62a9ceefb..f55aec808a 100644
--- a/packages/vue/test/base/src/router/index.ts
+++ b/packages/vue/test/base/src/router/index.ts
@@ -82,6 +82,10 @@ const routes: Array<RouteRecordRaw> = [
     path: '/components/select',
     component: () => import('@/views/Select.vue')
   },
+  {
+    path: '/components/range',
+    component: () => import('@/views/Range.vue')
+  },
   {
     path: '/nested',
     component: () => import('@/views/RouterOutlet.vue'),
diff --git a/packages/vue/test/base/src/views/Components.vue b/packages/vue/test/base/src/views/Components.vue
index 84c30f9b67..cad54df363 100644
--- a/packages/vue/test/base/src/views/Components.vue
+++ b/packages/vue/test/base/src/views/Components.vue
@@ -8,6 +8,9 @@
         <ion-item button router-link="/components/select">
           <ion-label>Select</ion-label>
         </ion-item>
+        <ion-item button router-link="/components/range">
+          <ion-label>Range</ion-label>
+        </ion-item>
       </ion-list>
     </ion-content>
   </ion-page>
diff --git a/packages/vue/test/base/src/views/Range.vue b/packages/vue/test/base/src/views/Range.vue
new file mode 100644
index 0000000000..c0d6106140
--- /dev/null
+++ b/packages/vue/test/base/src/views/Range.vue
@@ -0,0 +1,53 @@
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Range</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <form>
+        <ion-list>
+          <ion-item>
+            <ion-range :min="0" :max="20" :value="5" v-model="range">
+              <div slot="label">Range</div>
+            </ion-range>
+          </ion-item>
+          <p>Value: {{ range }}</p>
+        </ion-list>
+      </form>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import {
+  IonPage,
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonList,
+  IonItem,
+  IonRange
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  components: {
+    IonPage,
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonList,
+    IonItem,
+    IonRange
+  },
+  data() {
+    return {
+      range: 5
+    }
+  }
+});
+</script>