fix(range): handling the case where range would return NaN if max or min were set to undefined by setting max and min to their default values if you try to set them directly to undefined

Author: ShaneK

core/src/components/range/range.tsx

@@ -2,7 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
 import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from '@utils/content';
 import type { Attributes } from '@utils/helpers';
-import { inheritAriaAttributes, clamp, debounceEvent, renderHiddenInput } from '@utils/helpers';
+import { inheritAriaAttributes, clamp, debounceEvent, renderHiddenInput, isSafeNumber } from '@utils/helpers';
 import { printIonWarning } from '@utils/logging';
 import { isRTL } from '@utils/rtl';
 import { createColorClasses, hostContext } from '@utils/theme';
@@ -110,6 +110,10 @@ export class Range implements ComponentInterface {
   @Prop() min = 0;
   @Watch('min')
   protected minChanged() {
+    if (!isSafeNumber(this.min)) {
+      this.min = 0;
+    }
+
     if (!this.noUpdate) {
       this.updateRatio();
     }
@@ -121,6 +125,10 @@ export class Range implements ComponentInterface {
   @Prop() max = 100;
   @Watch('max')
   protected maxChanged() {
+    if (!isSafeNumber(this.max)) {
+      this.max = 100;
+    }
+
     if (!this.noUpdate) {
       this.updateRatio();
     }

core/src/components/range/test/range.spec.ts

@@ -28,6 +28,23 @@ describe('Range', () => {
       });
     });
 
+    it('should handle undefined min and max values by falling back to defaults', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range id="my-custom-range">
+        <div slot="label">Range</div>
+      </ion-range>`,
+      });
+
+      const range = page.body.querySelector('ion-range')!;
+      // Here we have to cast this to any, but in its react wrapper it accepts undefined as a valid value
+      range.min = undefined as any;
+      range.max = undefined as any;
+      await page.waitForChanges();
+      expect(range.min).toBe(0);
+      expect(range.max).toBe(100);
+    });
+
     it('should return the clamped value for a range dual knob component', () => {
       sharedRange.min = 0;
       sharedRange.max = 100;