From ac2c8e6c22da4d0d8224def24ddef56ee9d26246 Mon Sep 17 00:00:00 2001
From: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Date: Thu, 28 Sep 2023 16:15:46 -0400
Subject: [PATCH] fix(range): knob positions are correct on initial render with
 custom elements build (#28257)

Issue number: Resolves #25444

---------

<!-- 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. -->

In the custom elements build, currently used by React and Vue packages,
the range knob can be rendered incorrectly if the value is assigned
after the `connectedCallback` but before the initial render of the
component. This is most apparent with the dual knobs implementation in
React (referenced issue).

This results in the range's value being correct, but the visual
representation of the range to be incorrect.

This also causes issues with the custom elements build in the standalone
implementation of Ionic's components in Angular. If a range is presented
in a modal via a controller, the range will never render with the value
that is initially assigned to it.

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

- Updates the range knob positioning when the range has initially
rendered.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

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

This change needs to be pulled into the Ionic angular standalone work.

Dev-build: `7.4.3-dev.11695926109.13b1266a`
---
 core/src/components/range/range.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index bc51d322a4..2e194cd8c6 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -319,6 +319,7 @@ export class Range implements ComponentInterface {
   componentDidLoad() {
     this.originalIonInput = this.ionInput;
     this.setupGesture();
+    this.updateRatio();
     this.didLoad = true;
   }