fix(range): gesture is now properly re-created on connectedCallback (#22407)

resolves #22335

core/src/components/range/range.tsx

@@ -28,6 +28,7 @@ import { createColorClasses, hostContext } from '../../utils/theme';
 })
 export class Range implements ComponentInterface {
 
+  private didLoad = false;
   private noUpdate = false;
   private rect!: ClientRect;
   private hasFocus = false;
@@ -177,20 +178,7 @@ export class Range implements ComponentInterface {
    */
   @Event() ionBlur!: EventEmitter<void>;
 
-  connectedCallback() {
+  private setupGesture = async () => {
-    this.updateRatio();
-    this.debounceChanged();
-    this.disabledChanged();
-  }
-
-  disconnectedCallback() {
-    if (this.gesture) {
-      this.gesture.destroy();
-      this.gesture = undefined;
-    }
-  }
-
-  async componentDidLoad() {
     const rangeSlider = this.rangeSlider;
     if (rangeSlider) {
       this.gesture = (await import('../../utils/gesture')).createGesture({
@@ -206,6 +194,34 @@ export class Range implements ComponentInterface {
     }
   }
 
+  componentDidLoad() {
+    this.setupGesture();
+    this.didLoad = true;
+  }
+
+  connectedCallback() {
+    this.updateRatio();
+    this.debounceChanged();
+    this.disabledChanged();
+
+    /**
+     * If we have not yet rendered
+     * ion-range, then rangeSlider is not defined.
+     * But if we are moving ion-range via appendChild,
+     * then rangeSlider will be defined.
+     */
+    if (this.didLoad) {
+      this.setupGesture();
+    }
+  }
+
+  disconnectedCallback() {
+    if (this.gesture) {
+      this.gesture.destroy();
+      this.gesture = undefined;
+    }
+  }
+
   private handleKeyboard = (knob: KnobName, isIncrease: boolean) => {
     let step = this.step;
     step = step > 0 ? step : 1;