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

@@ -329,11 +329,15 @@ export class BqSlider {
 
   private renderInput = (type: 'max' | 'min', value: number, refCallback: (input: HTMLInputElement) => void) => {
     // Determine the zIndex value based on the type and the current min and max values.
-    // If min and max values are the same, set the zIndex of one of them to -1 depending on the type.
-    const zIndexValue =
-      (type === 'min' ? this.minValue === this.min : this.maxValue === this.max) && this.minValue === this.maxValue
-        ? '-1'
-        : '0';
+    const zIndexValue = (type: 'min' | 'max'): string => {
+      const zIndex = {
+        min: this.minValue === this.min && this.maxValue === this.minValue,
+        max: this.maxValue === this.max && this.minValue === this.maxValue,
+      };
+
+      // If the value of both thumbs is the same as the min or max value, set the zIndex to -1
+      return zIndex[type] ? '-1' : '0';
+    };
 
     return (
       <input
@@ -343,7 +347,7 @@ export class BqSlider {
             true,
           'pointer-events-none': this.isRangeType,
         }}
-        style={{ zIndex: zIndexValue }}
+        style={{ zIndex: zIndexValue(type) }}
         disabled={this.disabled}
         min={this.min}
         max={this.max}