fix(Slider): lower value not updated when is equal to upper value (#1078

)

packages/beeq/src/components/slider/bq-slider.tsx

@@ -1,7 +1,7 @@
 import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';
 
 import { TSliderType, TSliderValue } from './bq-slider.types';
-import { debounce, isNil, isString, TDebounce } from '../../shared/utils';
+import { clamp, debounce, isNil, isString, TDebounce } from '../../shared/utils';
 
 /**
  * @part base - The component's base wrapper.
@@ -176,21 +176,12 @@ export class BqSlider {
     this.setThumbPosition();
   };
 
-  private calculateMinValue = (value: TSliderValue) => {
-    const isMaxValue = (this.minValue ?? value[0]) === this.max;
-    const isGapExceeded = value[0] + this.gap > this.max;
-    // Make sure that the min value gets adjusted according to the gap value
-    return isMaxValue || isGapExceeded ? this.max - this.gap : value[0];
-  };
-
-  private calculateMaxValue = (value: TSliderValue, minValue: number) => Math.max(value[1], minValue + this.gap);
-
   private setState = (newValue: TSliderValue) => {
     const isRangeType = this.isRangeType;
     const value = this.stringToObject(newValue);
 
-    this.minValue = isRangeType ? this.calculateMinValue(value) : value;
-    this.maxValue = isRangeType ? this.calculateMaxValue(value, this.minValue) : this.minValue;
+    this.minValue = isRangeType ? clamp(value[0], this.min, this.max - this.gap) : value;
+    this.maxValue = isRangeType ? clamp(value[1], this.minValue + this.gap, this.max) : this.minValue;
   };
 
   private setThumbPosition = () => {
@@ -347,7 +338,7 @@ export class BqSlider {
             true,
           'pointer-events-none': this.isRangeType,
         }}
-        style={{ zIndex: zIndexValue(type) }}
+        style={this.isRangeType ? { zIndex: zIndexValue(type) } : undefined}
         disabled={this.disabled}
         min={this.min}
         max={this.max}

packages/beeq/src/shared/utils/__tests__/clamp.spec.ts

@@ -0,0 +1,19 @@
+import { clamp } from '..';
+
+describe(clamp.name, () => {
+  it('should return value', () => {
+    expect(clamp(10)).toBe(10);
+  });
+
+  it('should return lower value', () => {
+    expect(clamp(10, 20, 30)).toBe(20);
+  });
+
+  it('should return upper value', () => {
+    expect(clamp(40, 20, 30)).toBe(30);
+  });
+
+  it('should return value unchanged', () => {
+    expect(clamp(25, 20, 30)).toBe(25);
+  });
+});

packages/beeq/src/shared/utils/clamp.ts

@@ -0,0 +1,11 @@
+/**
+ * Restricts value to a specified interval [min, max]
+ *
+ * @param value - value
+ * @param min  - lower end of the interval
+ * @param max  - upper end of the interval
+ * @returns  - value in interval [min, max]
+ */
+export const clamp = (value: number, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) => {
+  return Math.min(Math.max(min, value), max);
+};

packages/beeq/src/shared/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './assetsPath';
+export * from './clamp';
 export * from './cssVariables';
 export * from './debounce';
 export * from './event';