Remove optimistic slider display updates

src/components/video-editor/SettingsPanel.tsx

@@ -3011,7 +3011,6 @@ 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}

src/components/video-editor/SliderControl.tsx

@@ -1,5 +1,5 @@
 import type { PointerEvent as ReactPointerEvent } from "react";
-import { useCallback, useRef, memo, useEffect } from "react";
+import { useCallback, useRef, memo } from "react";
 import { cn } from "@/lib/utils";
 
 interface SliderControlProps {
@@ -13,8 +13,6 @@ 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) {
@@ -40,10 +38,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);
 	const boundsRef = useRef<DOMRect | null>(null);
 	const requestRef = useRef<number | null>(null);
 
@@ -54,13 +49,6 @@ export const SliderControl = memo(function SliderControl({
 			? "bg-foreground/95 shadow-[0_0_10px_rgba(139,92,246,0.28)]"
 			: "bg-foreground/95 shadow-[0_0_10px_rgba(37,99,235,0.28)]";
 
-	// Sync initial and prop-driven changes to CSS variable
-	useEffect(() => {
-		if (rootRef.current) {
-			rootRef.current.style.setProperty("--slider-pct", String(pct / 100));
-		}
-	}, [pct]);
-
 	const updateValue = useCallback(
 		(clientX: number) => {
 			const bounds = boundsRef.current;
@@ -72,22 +60,10 @@ export const SliderControl = memo(function SliderControl({
 			const rawValue = min + normalized * (max - min);
 			const nextValue = clamp(quantizeToStep(rawValue, min, step), min, max);
 			const finalValue = Number(nextValue.toFixed(6));
-			const finalPct = (((finalValue - min) / (max - min || 1)) * 100).toFixed(4);
-
-			// 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 (optimistic && valueTextRef.current) {
-				valueTextRef.current.textContent = formatValue(finalValue);
-			}
-
 			// Notify parent
 			onChange(finalValue);
 		},
-		[max, min, onChange, step, formatValue, optimistic],
+		[max, min, onChange, step],
 	);
 
 	const handlePointerDown = useCallback(
@@ -146,7 +122,6 @@ export const SliderControl = memo(function SliderControl({
 
 	return (
 		<div
-			ref={rootRef}
 			role="slider"
 			tabIndex={0}
 			aria-label={label}
@@ -192,7 +167,6 @@ export const SliderControl = memo(function SliderControl({
 				{label}
 			</span>
 			<span
-				ref={valueTextRef}
 				className="pointer-events-none relative z-10 pr-3 text-[12px] font-medium tabular-nums text-foreground"
 			>
 				{formatValue(value)}