From e50db12841f346b4cecdb0d773c63f6c27af4e3c Mon Sep 17 00:00:00 2001
From: alikia2x <alikia2x@outlook.com>
Date: Sat, 4 Oct 2025 23:42:05 +0800
Subject: [PATCH] fix: prevent state update pitfall causing data/UI desync

---
 packages/palette/src/components/Picker/Slider.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/palette/src/components/Picker/Slider.tsx b/packages/palette/src/components/Picker/Slider.tsx
index 40df5b4..e9a2f9a 100644
--- a/packages/palette/src/components/Picker/Slider.tsx
+++ b/packages/palette/src/components/Picker/Slider.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useOklchCanvas } from "./useOklchCanvas";
 import { Handle } from "./Handle";
 import type { I18nProvider, LchChannel } from "./Picker";
@@ -14,9 +14,13 @@ interface SliderProps {
 }
 
 export const Slider = ({ useP3, channel, color, onChange, i18nProvider }: SliderProps) => {
-	const [value, setValue] = React.useState(color[channel]!.toFixed(precision[channel]));
+	const [value, setValue] = useState(color[channel]!.toFixed(precision[channel]));
 	const containerRef = useRef<HTMLDivElement>(null);
 
+	useEffect(() => {
+		setValue(color[channel]!.toFixed(precision[channel]));
+	}, [color.l, color.c, color.h]);
+
 	const canvasRef = useRef<null | HTMLCanvasElement>(null);
 	useOklchCanvas({ channel: channel, max: maxValue[channel], canvasRef: canvasRef, color, useP3 });