feat: add slider to dynamic parameters (#17453)

jaaydenh · web-flow · commit 8723fe99f5b9 · 2025-04-17T12:40:37.000-04:00
This adds the slider to the dynamic parameters component and does some additional styling cleanup for the dynamic parameters form <img width="630" alt="Screenshot 2025-04-17 at 16 54 05" src="https://github.com/user-attachments/assets/1640e8df-7483-4275-99ee-682ff6218658" />
diff --git a/site/src/components/Checkbox/Checkbox.tsx b/site/src/components/Checkbox/Checkbox.tsx
@@ -18,7 +18,7 @@ export const Checkbox = React.forwardRef<
 	<CheckboxPrimitive.Root
 		ref={ref}
 		className={cn(
-			`peer h-6 w-6 shrink-0 rounded-sm border border-border border-solid
+			`peer h-5 w-5 shrink-0 rounded-sm border border-border border-solid
     	focus-visible:outline-none focus-visible:ring-2
     	focus-visible:ring-content-link focus-visible:ring-offset-4 focus-visible:ring-offset-surface-primary
     	disabled:cursor-not-allowed disabled:bg-surface-primary disabled:data-[state=checked]:bg-surface-tertiary
@@ -34,10 +34,10 @@ export const Checkbox = React.forwardRef<
 		>
 			<div className="flex">
 				{(props.checked === true || props.defaultChecked === true) && (
-					<Check className="w-5 h-5" strokeWidth={2.5} />
+					<Check className="w-4 h-4" strokeWidth={2.5} />
 				)}
 				{props.checked === "indeterminate" && (
-					<Minus className="w-5 h-5" strokeWidth={2.5} />
+					<Minus className="w-4 h-4" strokeWidth={2.5} />
 				)}
 			</div>
 		</CheckboxPrimitive.Indicator>
diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
@@ -22,6 +22,7 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "components/Select/Select";
+import { Slider } from "components/Slider/Slider";
 import { Switch } from "components/Switch/Switch";
 import {
 	Tooltip,
@@ -91,7 +92,7 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter, isPreset }) => {
 				</span>
 			)}
 
-			<div className="flex flex-col gap-1.5">
+			<div className="flex flex-col w-full">
 				<Label className="flex gap-2 flex-wrap text-sm font-medium">
 					{displayName}
 
@@ -130,6 +131,11 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter, isPreset }) => {
 							</Tooltip>
 						</TooltipProvider>
 					)}
+					{parameter.form_type === "slider" && (
+						<output className="ml-auto font-semibold">
+							{parameter.value.value}
+						</output>
+					)}
 				</Label>
 
 				{hasDescription && (
@@ -278,6 +284,23 @@ const ParameterField: FC<ParameterFieldProps> = ({
 					</Label>
 				</div>
 			);
+
+		case "slider":
+			return (
+				<Slider
+					className="mt-2"
+					defaultValue={[
+						Number(
+							parameter.default_value.valid ? parameter.default_value.value : 0,
+						),
+					]}
+					onValueChange={([value]) => onChange(value.toString())}
+					min={parameter.validations[0]?.validation_min ?? 0}
+					max={parameter.validations[0]?.validation_max ?? 100}
+					disabled={disabled}
+				/>
+			);
+
 		case "input": {
 			const inputType = parameter.type === "number" ? "number" : "text";
 			const inputProps: Record<string, unknown> = {};
