diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index 26e5ef785dd..9192462c024 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -401,6 +401,8 @@ export class Range implements ComponentInterface {
     this.min = isSafeNumber(this.min) ? this.min : 0;
     this.max = isSafeNumber(this.max) ? this.max : 100;
     this.step = isSafeNumber(this.step) ? this.step : 1;
+
+    this.updateRatio();
   }
 
   componentDidLoad() {
diff --git a/core/src/components/range/test/modal/index.html b/core/src/components/range/test/modal/index.html
new file mode 100644
index 00000000000..f7ced414592
--- /dev/null
+++ b/core/src/components/range/test/modal/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Range - Modal</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content class="ion-padding">
+        <ion-button id="open-modal">Open Modal</ion-button>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const openModal = document.querySelector('#open-modal');
+
+      openModal.addEventListener('click', async () => {
+        const content = document.createElement('div');
+        content.innerHTML = `
+          <ion-content class="ion-padding">
+            <ion-range aria-label="Dual Knobs Range"></ion-range>
+          </ion-content>
+        `;
+
+        const range = content.querySelector('ion-range');
+        range.dualKnobs = true;
+        range.value = { lower: 20, upper: 80 };
+
+        const modal = Object.assign(document.createElement('ion-modal'), {
+          breakpoints: [0, 1],
+          component: content,
+          handle: true,
+          initialBreakpoint: 1,
+        });
+
+        document.body.appendChild(modal);
+        await modal.present();
+      });
+    </script>
+  </body>
+</html>
diff --git a/core/src/components/range/test/modal/range.e2e.ts b/core/src/components/range/test/modal/range.e2e.ts
new file mode 100644
index 00000000000..3b62bed6b32
--- /dev/null
+++ b/core/src/components/range/test/modal/range.e2e.ts
@@ -0,0 +1,31 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('range: modal'), () => {
+    test('should render dual knob value when presented in a modal', async ({ page }) => {
+      await page.goto('/src/components/range/test/modal', config);
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#open-modal');
+      await ionModalDidPresent.next();
+
+      const range = page.locator('ion-modal ion-range');
+      await expect(range).toBeVisible();
+
+      const knobPositions = await range.evaluate((el: HTMLIonRangeElement) => {
+        const shadowRoot = el.shadowRoot!;
+
+        return {
+          lower: (shadowRoot.querySelector('[part~="knob-handle-lower"]') as HTMLElement).style.left,
+          upper: (shadowRoot.querySelector('[part~="knob-handle-upper"]') as HTMLElement).style.left,
+        };
+      });
+
+      expect(knobPositions).toEqual({
+        lower: '20%',
+        upper: '80%',
+      });
+    });
+  });
+});
