fix(range): update range ratio when new min/max are passed (#15512)

fixes #15511

core/src/components/range/range.tsx

@@ -68,11 +68,23 @@ export class Range {
    * Minimum integer value of the range. Defaults to `0`.
    */
   @Prop() min = 0;
+  @Watch('min')
+  protected minChanged() {
+    if (!this.noUpdate) {
+      this.updateRatio();
+    }
+  }
 
   /**
    * Maximum integer value of the range. Defaults to `100`.
    */
   @Prop() max = 100;
+  @Watch('max')
+  protected maxChanged() {
+    if (!this.noUpdate) {
+      this.updateRatio();
+    }
+  }
 
   /**
    * If true, a pin with integer value is shown when the knob

core/src/components/range/test/basic/index.html

@@ -99,6 +99,21 @@
       </ion-list>
 
       <ion-button onclick="elTest()">Test</ion-button>
+
+      <ion-list>
+        <ion-list-header>
+          Coupled sliders
+        </ion-list-header>
+        <ion-item>
+          <ion-range min="0" value="0" max="50" id="minRange"></ion-range>
+        </ion-item>
+        <ion-item>
+          <ion-range min="50" value="100" max="100" id="maxRange"></ion-range>
+        </ion-item>
+        <ion-item>
+          <ion-range min="0" value="50" max="100" id="targetRange"></ion-range>
+        </ion-item>
+      </ion-list>
     </ion-content>
 
   </ion-app>
@@ -168,6 +183,18 @@
       var range = document.getElementById('range');
       range.disabled = !range.disabled;
     }
+
+    const minRange = document.getElementById('minRange');
+    const maxRange = document.getElementById('maxRange');
+    const targetRange = document.getElementById('targetRange');
+
+    minRange.addEventListener('ionChange', function(ev) {
+      targetRange.min = ev.detail.value;
+    })
+
+    maxRange.addEventListener('ionChange', function(ev) {
+      targetRange.max = ev.detail.value;
+    })
   </script>
 </body>