fix(range): clamp values that are out of bounds (#17623)

* fix(range): clamp out of bounds values, add tests

* lint files

core/src/components/range/range.tsx

@@ -126,9 +126,27 @@ export class Range implements ComponentInterface {
     if (!this.noUpdate) {
       this.updateRatio();
     }
+
+    value = this.ensureValueInBounds(value);
+
     this.ionChange.emit({ value });
   }
 
+  private clampBounds = (value: any): number => {
+    return clamp(this.min, value, this.max);
+  }
+
+  private ensureValueInBounds = (value: any) => {
+    if (this.dualKnobs) {
+      return {
+        lower: this.clampBounds(value.lower),
+        upper: this.clampBounds(value.upper)
+      };
+    } else {
+      return this.clampBounds(value);
+    }
+  }
+
   /**
    * Emitted when the value property has changed.
    */

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

@@ -0,0 +1,45 @@
+import { Range } from '../range';
+
+let sharedRange;
+describe('Range', () => {
+  beforeEach(() => {
+    sharedRange = new Range();
+  });
+  describe('ensureValueInBounds()', () => {
+    it('should return the clamped value for a range single knob component', () => {
+      sharedRange.min = 0;
+      sharedRange.max = 100;
+
+      const valueTests = [
+        [50, 50],
+        [-100, 0],
+        [1000, 100],
+        [0, 0],
+        [100, 100]
+      ];
+
+      valueTests.forEach(test => {
+        expect(sharedRange.ensureValueInBounds(test[0])).toBe(test[1]);
+      });
+    });
+
+    it('should return the clamped value for a range dual knob component', () => {
+      sharedRange.min = 0;
+      sharedRange.max = 100;
+      sharedRange.dualKnobs = true;
+
+      const valueTests = [
+        [{ lower: 0, upper: 0}, { lower: 0, upper: 0}],
+        [{ lower: -100, upper: 0}, { lower: 0, upper: 0}],
+        [{ lower: 0, upper: 10000}, { lower: 0, upper: 100}],
+        [{ lower: -100, upper: 200}, { lower: 0, upper: 100}],
+        [{ lower: 0, upper: 100}, { lower: 0, upper: 100}],
+        [{ lower: 200, upper: -100}, { lower: 100, upper: 0}],
+      ];
+
+      valueTests.forEach(test => {
+        expect(sharedRange.ensureValueInBounds(test[0])).toEqual(test[1]);
+      });
+    });
+  });
+});