From 14e784cbc9c50d3ac989f893e39eb652ed036ac2 Mon Sep 17 00:00:00 2001
From: webadderall <131426131+webadderall@users.noreply.github.com>
Date: Thu, 17 Sep 2026 15:20:11 +1000
Subject: [PATCH] Keep clip speed slider display aligned with accepted changes

---
 src/components/video-editor/SettingsPanel.tsx |  1 +
 src/components/video-editor/SliderControl.tsx | 11 +++++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx
index feb54da0..ba7574c1 100644
--- a/src/components/video-editor/SettingsPanel.tsx
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -3011,6 +3011,7 @@ export function SettingsPanel({
 				<SectionLabel>{tSettings("clip.title", "Clip")}</SectionLabel>
 				<SliderControl
 					label={tSettings("speed.label", "Speed")}
+					optimistic={false}
 					value={Math.min(clipSpeedRange.max, Math.max(clipSpeedRange.min, selectedClipSpeed ?? 1))}
 					defaultValue={1}
 					min={clipSpeedRange.min}
diff --git a/src/components/video-editor/SliderControl.tsx b/src/components/video-editor/SliderControl.tsx
index dd0aaf0d..7ed239ae 100644
--- a/src/components/video-editor/SliderControl.tsx
+++ b/src/components/video-editor/SliderControl.tsx
@@ -13,6 +13,8 @@ interface SliderControlProps {
 	formatValue: (value: number) => string;
 	parseInput: (text: string) => number | null;
 	accentColor?: "purple" | "blue";
+	/** Disable when the parent can reject a requested value. */
+	optimistic?: boolean;
 }
 
 function clamp(value: number, min: number, max: number) {
@@ -38,6 +40,7 @@ export const SliderControl = memo(function SliderControl({
 	formatValue,
 	parseInput: _parseInput,
 	accentColor = "blue",
+	optimistic = true,
 }: SliderControlProps) {
 	const rootRef = useRef<HTMLDivElement | null>(null);
 	const valueTextRef = useRef<HTMLSpanElement | null>(null);
@@ -71,20 +74,20 @@ export const SliderControl = memo(function SliderControl({
 			const finalValue = Number(nextValue.toFixed(6));
 			const finalPct = (((finalValue - min) / (max - min || 1)) * 100).toFixed(4);
 
-			// Direct DOM update for instant feedback
-			if (rootRef.current) {
+			// Only bypass React when the parent accepts every requested value.
+			if (optimistic && rootRef.current) {
 				rootRef.current.style.setProperty("--slider-pct", String(Number(finalPct) / 100));
 				rootRef.current.setAttribute("aria-valuenow", String(finalValue));
 				rootRef.current.setAttribute("aria-valuetext", formatValue(finalValue));
 			}
-			if (valueTextRef.current) {
+			if (optimistic && valueTextRef.current) {
 				valueTextRef.current.textContent = formatValue(finalValue);
 			}
 
 			// Notify parent
 			onChange(finalValue);
 		},
-		[max, min, onChange, step, formatValue],
+		[max, min, onChange, step, formatValue, optimistic],
 	);
 
 	const handlePointerDown = useCallback(