Fix overlapping slider thumbs stuck at max

Author: mj12albert

packages/react/src/slider/root/useSliderRoot.ts

@@ -37,23 +37,21 @@ function areValuesEqual(
   return false;
 }
 
-function findClosest(values: readonly number[], currentValue: number) {
-  const { index: closestIndex } =
-    values.reduce<{ distance: number; index: number } | null>(
-      (acc, value: number, index: number) => {
-        const distance = Math.abs(currentValue - value);
-
-        if (acc === null || distance < acc.distance || distance === acc.distance) {
-          return {
-            distance,
-            index,
-          };
-        }
+function getClosestThumbIndex(values: readonly number[], currentValue: number, min: number) {
+  let closestIndex;
+  let minDistance;
+  for (let i = 0; i < values.length; i += 1) {
+    const distance = Math.abs(currentValue - values[i]);
+    if (
+      minDistance === undefined ||
+      distance < minDistance ||
+      (values[i] === min && distance === minDistance)
+    ) {
+      closestIndex = i;
+      minDistance = distance;
+    }
+  }
 
-        return acc;
-      },
-      null,
-    ) ?? {};
   return closestIndex;
 }
 
@@ -371,7 +369,7 @@ export function useSliderRoot(parameters: useSliderRoot.Parameters): useSliderRo
       }
 
       if (shouldCaptureThumbIndex) {
-        closestThumbIndexRef.current = findClosest(values, newValue) ?? 0;
+        closestThumbIndexRef.current = getClosestThumbIndex(values, newValue, min) ?? 0;
       }
 
       const closestThumbIndex = closestThumbIndexRef.current ?? 0;

packages/react/src/slider/thumb/useSliderThumb.ts

@@ -129,8 +129,6 @@ export function useSliderThumb(parameters: useSliderThumb.Parameters): useSlider
       }[orientation]]: `${percent}%`,
       [isVertical ? 'left' : 'top']: '50%',
       transform: `translate(${(isVertical || !isRtl ? -1 : 1) * 50}%, ${(isVertical ? 1 : -1) * 50}%)`,
-      // So the non active thumb doesn't show its label on hover.
-      pointerEvents: activeIndex !== -1 && activeIndex !== index ? 'none' : undefined,
       zIndex: activeIndex === index ? 1 : undefined,
     } satisfies React.CSSProperties;
   }, [activeIndex, isRtl, orientation, percent, index]);