From 2b5bb25c39a5b6b1e138c5de9104c981def9f297 Mon Sep 17 00:00:00 2001 From: pratyushjaiswal0806-dot Date: Fri, 5 Jun 2026 00:18:03 +0530 Subject: [PATCH] fix(range): initialize ratios before first render --- core/src/components/range/range.tsx | 2 + .../components/range/test/modal/index.html | 50 +++++++++++++++++++ .../components/range/test/modal/range.e2e.ts | 31 ++++++++++++ 3 files changed, 83 insertions(+) create mode 100644 core/src/components/range/test/modal/index.html create mode 100644 core/src/components/range/test/modal/range.e2e.ts 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 @@ + + + + + Range - Modal + + + + + + + + + + + Open Modal + + + + + + 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%', + }); + }); + }); +});