fix(slider): page freeze when from/to overflow max value (#916)

Refinitiv · Aug 25, 2023 · 58ec700 · 58ec700
1 parent 799e8b0
commit 58ec700
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 24 deletions.
diff --git a/packages/elements/src/slider/__test__/slider.test.js b/packages/elements/src/slider/__test__/slider.test.js
@@ -347,6 +347,16 @@ describe('slider/Slider', function () {
     });
   });
   describe('Min-range', function () {
+    it('Should reset from/to value to not exceed max value and ensure it keep min range correctly', async function () {
+      el = await fixture(
+        '<ef-slider range min="0" max="10" from="25" to="75"  min-range="1"></ef-slider></ef-slider>'
+      );
+      await elementUpdated(el);
+      expect(el.min).to.equal('0');
+      expect(el.max).to.equal('10');
+      expect(el.from).to.equal('9');
+      expect(el.to).to.equal('10');
+    });
     it('Set from and to wrong distance "to" nearly max', async function () {
       el = await fixture('<ef-slider range min="-10" max="10" from="8" to="9" min-range="5"></ef-slider>');
       await elementUpdated(el);

diff --git a/packages/elements/src/slider/index.ts b/packages/elements/src/slider/index.ts
@@ -1119,9 +1119,8 @@ export class Slider extends ControlElement {
       this.from = this.format(this.fromNumber);
     } else {
       // if value is outside boundary, set to boundary
-      if (this.fromNumber < this.minNumber) {
-        this.from = this.min;
-      } else if (this.fromNumber > this.toNumber) {
+      this.from = clamp(this.fromNumber, this.minNumber, this.maxNumber);
+      if (this.fromNumber > this.toNumber) {
         this.from = this.to;
       }
 
@@ -1146,23 +1145,18 @@ export class Slider extends ControlElement {
    * @returns true if value and step inside a boundary
    */
   private isValueInBoundary(value: number, valueFor: string): boolean {
-    if (this.minNumber < this.maxNumber) {
-      // Check if value is in range
-      if (this.range) {
-        if (valueFor === SliderDataName.to) {
-          if (value < this.fromNumber + this.minRangeNumber || value > this.maxNumber) {
-            return false;
-          }
-        } else if (value < this.minNumber || value > this.toNumber - this.minRangeNumber) {
-          return false;
-        }
-      } else if (value < this.minNumber || value > this.maxNumber) {
+    if (this.minNumber > this.maxNumber) {
+      return false;
+    }
+    // Check if value is in range
+    if (value < this.minNumber || value > this.maxNumber) {
+      return false;
+    }
+    if (this.range) {
+      if (valueFor === SliderDataName.to && value < this.fromNumber + this.minRangeNumber) {
+        return false;
+      } else if (value > this.toNumber - this.minRangeNumber) {
         return false;
-      }
-
-      // check step min and max in range
-      if (this.stepRange < this.minNumber || this.stepRange > this.maxNumber) {
-        return true;
       }
     }
     return true;
@@ -1177,10 +1171,9 @@ export class Slider extends ControlElement {
       this.to = this.format(this.toNumber);
     } else {
       // if value is outside boundary, set to boundary
+      this.to = clamp(this.toNumber, this.minNumber, this.maxNumber);
       if (this.toNumber < this.fromNumber) {
         this.to = this.from;
-      } else if (this.toNumber > this.maxNumber) {
-        this.to = this.max;
       }
 
       if (this.minRangeNumber) {
@@ -1211,10 +1204,8 @@ export class Slider extends ControlElement {
   private onMinRangeChange(): void {
     const valueMinRange = Math.abs(this.minRangeNumber);
     const maximumRangeMinMax = Math.abs(this.maxNumber - this.minNumber);
-    const maximumRangeFromTo = Math.abs(this.toNumber - this.fromNumber);
-
     if (valueMinRange && valueMinRange >= this.stepNumber) {
-      if (valueMinRange <= maximumRangeMinMax && valueMinRange <= maximumRangeFromTo) {
+      if (valueMinRange <= maximumRangeMinMax) {
         this.minRange = valueMinRange.toString();
       } else {
         this.minRange = maximumRangeMinMax.toString();