From d01bcbd9ad3c8a27cfc6918a2b28dab4cb2adfb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonza=CC=81lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Wed, 29 May 2024 19:39:10 +0300
Subject: [PATCH] fix(Slider): avoid the range slider being stuck when min/max
 values overlap

---
 packages/beeq/src/components/slider/bq-slider.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/beeq/src/components/slider/bq-slider.tsx b/packages/beeq/src/components/slider/bq-slider.tsx
index bbfdeb76e..64dc5e4f5 100644
--- a/packages/beeq/src/components/slider/bq-slider.tsx
+++ b/packages/beeq/src/components/slider/bq-slider.tsx
@@ -328,6 +328,17 @@ 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.
+    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
         type="range"
@@ -336,6 +347,7 @@ export class BqSlider {
             true,
           'pointer-events-none': this.isRangeType,
         }}
+        style={{ zIndex: zIndexValue(type) }}
         disabled={this.disabled}
         min={this.min}
         max={this.max}