From 5ccd245923d208952727ebf817b227649833b8ba Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Tue, 4 Feb 2025 22:17:23 +0800
Subject: [PATCH] Fix thumb positioning on external value change

---
 .../react/src/slider/root/useSliderRoot.ts     | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/packages/react/src/slider/root/useSliderRoot.ts b/packages/react/src/slider/root/useSliderRoot.ts
index 4bcdb6e744..39553e3e86 100644
--- 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)) {