Fix thumb positioning on external value change

mui · Feb 4, 2025 · 5ccd245 · 5ccd245
1 parent a7c83db
commit 5ccd245
Showing 1 changed file with 18 additions and 0 deletions.
diff --git a/packages/react/src/slider/root/useSliderRoot.ts b/packages/react/src/slider/root/useSliderRoot.ts
@@ -362,6 +362,24 @@ export function useSliderRoot(parameters: useSliderRoot.Parameters): useSliderRo
     },
   );
 
+  useEnhancedEffect(() => {
+    if (valueProp === undefined || dragging) {
+      return;
+    }
+
+    if (typeof valueUnwrapped === 'number') {
+      const newPercentageValue = valueToPercent(valueUnwrapped, min, max);
+      if (newPercentageValue !== percentageValues[0]) {
+        setPercentageValues([newPercentageValue]);
+      }
+    } else if (Array.isArray(valueUnwrapped)) {
+      const newPercentageValues = [];
+      for (let i = 0; i < valueUnwrapped.length; i += 1) {
+        newPercentageValues.push(valueToPercent(valueUnwrapped[i], min, max));
+      }
+    }
+  }, [dragging, min, max, percentageValues, setPercentageValues, valueProp, valueUnwrapped]);
+
   useEnhancedEffect(() => {
     const activeEl = activeElement(ownerDocument(sliderRef.current));
     if (disabled && sliderRef.current?.contains(activeEl)) {