From 0d1d08d406f650d215ed1a2c6f7b0032d7431b67 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Mon, 21 Jul 2025 21:22:39 +0000
Subject: [PATCH 1/5] fix: debounce slider to avoid laggy behavior

---
 .../DynamicParameter/DynamicParameter.tsx     | 42 ++++++++++---------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
index 5d92fb6d6ae6d..a13e1db6833c7 100644
--- a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
+++ b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
@@ -77,7 +77,8 @@ export const DynamicParameter: FC<DynamicParameterProps> = ({
 			/>
 			<div className="max-w-lg">
 				{parameter.form_type === "input" ||
-				parameter.form_type === "textarea" ? (
+				parameter.form_type === "textarea" ||
+				parameter.form_type === "slider" ? (
 					<DebouncedParameterField
 						id={id}
 						parameter={parameter}
@@ -408,6 +409,26 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
 				</Stack>
 			);
 		}
+
+		case "slider":
+			return (
+				<div className="flex flex-row items-baseline gap-3">
+					<Slider
+						id={id}
+						className="mt-2"
+						value={[Number.isFinite(Number(localValue)) ? Number(localValue) : 0]}
+						onValueChange={([value]) => {
+							setLocalValue(value.toString());
+						}}
+						min={parameter.validations[0]?.validation_min ?? 0}
+						max={parameter.validations[0]?.validation_max ?? 100}
+						disabled={disabled}
+					/>
+					<span className="w-4 font-medium">
+						{Number.isFinite(Number(localValue)) ? localValue : "0"}
+					</span>
+				</div>
+			);
 	}
 };
 
@@ -564,25 +585,6 @@ const ParameterField: FC<ParameterFieldProps> = ({
 				</div>
 			);
 
-		case "slider":
-			return (
-				<div className="flex flex-row items-baseline gap-3">
-					<Slider
-						id={id}
-						className="mt-2"
-						value={[Number.isFinite(Number(value)) ? Number(value) : 0]}
-						onValueChange={([value]) => {
-							onChange(value.toString());
-						}}
-						min={parameter.validations[0]?.validation_min ?? 0}
-						max={parameter.validations[0]?.validation_max ?? 100}
-						disabled={disabled}
-					/>
-					<span className="w-4 font-medium">
-						{Number.isFinite(Number(value)) ? value : "0"}
-					</span>
-				</div>
-			);
 		case "error":
 			return <Diagnostics diagnostics={parameter.diagnostics} />;
 	}

From b2f30fc06ec7ebfe93786afbe2860bd3c8a66705 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Mon, 21 Jul 2025 21:23:30 +0000
Subject: [PATCH 2/5] fix: format

---
 .../modules/workspaces/DynamicParameter/DynamicParameter.tsx  | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
index a13e1db6833c7..995ca9cee2613 100644
--- a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
+++ b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
@@ -416,7 +416,9 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
 					<Slider
 						id={id}
 						className="mt-2"
-						value={[Number.isFinite(Number(localValue)) ? Number(localValue) : 0]}
+						value={[
+							Number.isFinite(Number(localValue)) ? Number(localValue) : 0,
+						]}
 						onValueChange={([value]) => {
 							setLocalValue(value.toString());
 						}}

From 49807807c0f32caa6fc378f0ce8ed877672e572e Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Mon, 21 Jul 2025 21:42:32 +0000
Subject: [PATCH 3/5] fix: slider improvements

---
 .../DynamicParameter/DynamicParameter.tsx        | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
index 995ca9cee2613..3c77d79d661ad 100644
--- a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
+++ b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
@@ -411,23 +411,27 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
 		}
 
 		case "slider":
+			const numericValue = Number.isFinite(Number(localValue)) ? Number(localValue) : 0;
+			const {
+				validation_min: min = 0,
+				validation_max: max = 100,
+			} = parameter.validations[0] ?? {};
+
 			return (
 				<div className="flex flex-row items-baseline gap-3">
 					<Slider
 						id={id}
 						className="mt-2"
-						value={[
-							Number.isFinite(Number(localValue)) ? Number(localValue) : 0,
-						]}
+						value={[numericValue]}
 						onValueChange={([value]) => {
 							setLocalValue(value.toString());
 						}}
-						min={parameter.validations[0]?.validation_min ?? 0}
-						max={parameter.validations[0]?.validation_max ?? 100}
+						min={min ?? undefined}
+						max={max ?? undefined}
 						disabled={disabled}
 					/>
 					<span className="w-4 font-medium">
-						{Number.isFinite(Number(localValue)) ? localValue : "0"}
+						{numericValue}
 					</span>
 				</div>
 			);

From 24cf65712d302f15300ef52a242d47a5bcfd897f Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Mon, 21 Jul 2025 21:46:00 +0000
Subject: [PATCH 4/5] fix: format

---
 .../DynamicParameter/DynamicParameter.tsx       | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
index 3c77d79d661ad..1a47621e1d594 100644
--- a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
+++ b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
@@ -410,12 +410,12 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
 			);
 		}
 
-		case "slider":
-			const numericValue = Number.isFinite(Number(localValue)) ? Number(localValue) : 0;
-			const {
-				validation_min: min = 0,
-				validation_max: max = 100,
-			} = parameter.validations[0] ?? {};
+		case "slider": {
+			const numericValue = Number.isFinite(Number(localValue))
+				? Number(localValue)
+				: 0;
+			const { validation_min: min = 0, validation_max: max = 100 } =
+				parameter.validations[0] ?? {};
 
 			return (
 				<div className="flex flex-row items-baseline gap-3">
@@ -430,11 +430,10 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
 						max={max ?? undefined}
 						disabled={disabled}
 					/>
-					<span className="w-4 font-medium">
-						{numericValue}
-					</span>
+					<span className="w-4 font-medium">{numericValue}</span>
 				</div>
 			);
+		}
 	}
 };
 

From f7c8dcc493e948ad46b3feff3f4846f00d5ec2ec Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Tue, 22 Jul 2025 12:16:00 +0000
Subject: [PATCH 5/5] fix: handle dynamic defaults correct for debounced
 parameters

---
 .../workspaces/DynamicParameter/DynamicParameter.tsx     | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
index 1a47621e1d594..fa8eab193b53a 100644
--- a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
+++ b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
@@ -85,7 +85,6 @@ export const DynamicParameter: FC<DynamicParameterProps> = ({
 						value={value}
 						onChange={onChange}
 						disabled={disabled}
-						isPreset={isPreset}
 					/>
 				) : (
 					<ParameterField
@@ -251,7 +250,6 @@ interface DebouncedParameterFieldProps {
 	onChange: (value: string) => void;
 	disabled?: boolean;
 	id: string;
-	isPreset?: boolean;
 }
 
 const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
@@ -260,7 +258,6 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
 	onChange,
 	disabled,
 	id,
-	isPreset,
 }) => {
 	const [localValue, setLocalValue] = useState(
 		value !== undefined ? value : validValue(parameter.value),
@@ -272,13 +269,13 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
 	const prevDebouncedValueRef = useRef<string | undefined>();
 	const prevValueRef = useRef(value);
 
-	// This is necessary in the case of fields being set by preset parameters
+	// Necessary for dynamic defaults or fields being set by preset parameters
 	useEffect(() => {
-		if (isPreset && value !== undefined && value !== prevValueRef.current) {
+		if (value !== undefined && value !== prevValueRef.current) {
 			setLocalValue(value);
 			prevValueRef.current = value;
 		}
-	}, [value, isPreset]);
+	}, [value]);
 
 	useEffect(() => {
 		// Only call onChangeEvent if debouncedLocalValue is different from the previously committed value