Apr 21, 2025 · Apr 21, 2025 · Apr 21, 2025 · Apr 21, 2025 · Apr 21, 2025 · Apr 21, 2025
diff --git a/site/src/components/Slider/Slider.tsx b/site/src/components/Slider/Slider.tsx
 )}
 {...props}
 >
 <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-surface-secondary data-[disabled]:opacity-40">
 <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-surface-secondary data-[disabled]:opacity-40">
 <SliderPrimitive.Range className="absolute h-full bg-content-primary" />
 </SliderPrimitive.Track>
 <SliderPrimitive.Thumb
diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
 data-testid={`parameter-field-${parameter.name}`}
 >
 <ParameterLabel parameter={parameter} isPreset={isPreset} />
 <ParameterField
 parameter={parameter}
 onChange={onChange}
 disabled={disabled}
 id={id}
 />
 <div className="max-w-lg">
 <ParameterField
 parameter={parameter}
 onChange={onChange}
 disabled={disabled}
 id={id}
 />
 </div>
 {parameter.diagnostics.length > 0 && (
 <ParameterDiagnostics diagnostics={parameter.diagnostics} />
 )}
 </span>
 )}

 <div className="flex flex-col w-full">
 <div className="flex flex-col w-full gap-1">
 <Label className="flex gap-2 flex-wrap text-sm font-medium">
 {displayName}

 </Tooltip>
 </TooltipProvider>
 )}
 {parameter.form_type === "slider" && (
 <output className="ml-auto font-semibold">
 {parameter.value.value}
 </output>
 )}
 </Label>

 {hasDescription && (

 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}
 />
 <div className="flex flex-row items-baseline gap-3">
 <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}
 />
 <span className="w-4 font-medium">{parameter.value.value}</span>
 </div>
 );

 case "textarea":
 return (
 <Textarea
 className="max-w-2xl"
 defaultValue={defaultValue}
 onChange={(e) => onChange(e.target.value)}
 onInput={(e) => {
 const target = e.currentTarget;
 target.style.maxHeight = "700px";
 target.style.height = `${target.scrollHeight}px`;
 }}
 disabled={disabled}
 placeholder={
 (parameter.styling as { placeholder?: string })?.placeholder
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
 Go back
 </button>
 </div>
 <div className="flex flex-col gap-6 max-w-screen-sm mx-auto">
 <div className="flex flex-col gap-6 max-w-screen-md mx-auto">
 <header className="flex flex-col items-start gap-2 mt-10">
 <div className="flex items-center gap-2">
 <Avatar
Original file line number	Diff line number	Diff line change
Expand Up		@@ -20,7 +20,7 @@ export const Slider = React.forwardRef<
		)}
		{...props}
		>
		<SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-surface-secondary data-[disabled]:opacity-40">
		<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-surface-secondary data-[disabled]:opacity-40">
		<SliderPrimitive.Range className="absolute h-full bg-content-primary" />
		</SliderPrimitive.Track>
		<SliderPrimitive.Thumb
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -57,12 +57,14 @@ export const DynamicParameter: FC<DynamicParameterProps> = ({
		data-testid={`parameter-field-${parameter.name}`}
		>
		<ParameterLabel parameter={parameter} isPreset={isPreset} />
		<ParameterField
		parameter={parameter}
		onChange={onChange}
		disabled={disabled}
		id={id}
		/>
		<div className="max-w-lg">
		<ParameterField
		parameter={parameter}
		onChange={onChange}
		disabled={disabled}
		id={id}
		/>
		</div>
		{parameter.diagnostics.length > 0 && (
		<ParameterDiagnostics diagnostics={parameter.diagnostics} />
		)}
Expand DownExpand Up		@@ -93,7 +95,7 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter, isPreset }) => {
		</span>
		)}

		<div className="flex flex-col w-full">
		<div className="flex flex-col w-full gap-1">
		<Label className="flex gap-2 flex-wrap text-sm font-medium">
		{displayName}

Expand DownExpand Up		@@ -132,11 +134,6 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter, isPreset }) => {
		</Tooltip>
		</TooltipProvider>
		)}
		{parameter.form_type === "slider" && (
		<output className="ml-auto font-semibold">
		{parameter.value.value}
		</output>
		)}
		</Label>

		{hasDescription && (
Expand DownExpand Up		@@ -296,25 +293,36 @@ const ParameterField: FC<ParameterFieldProps> = ({

		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}
		/>
		<div className="flex flex-row items-baseline gap-3">
		<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}
		/>
		<span className="w-4 font-medium">{parameter.value.value}</span>
		</div>
		);

		case "textarea":
		return (
		<Textarea
		className="max-w-2xl"
		defaultValue={defaultValue}
		onChange={(e) => onChange(e.target.value)}
		onInput={(e) => {
		const target = e.currentTarget;
		target.style.maxHeight = "700px";
		target.style.height = `${target.scrollHeight}px`;
		}}
		disabled={disabled}
		placeholder={
		(parameter.styling as { placeholder?: string })?.placeholder
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -259,7 +259,7 @@ export const CreateWorkspacePageViewExperimental: FC<
		Go back
		</button>
		</div>
		<div className="flex flex-col gap-6 max-w-screen-sm mx-auto">
		<div className="flex flex-col gap-6 max-w-screen-md mx-auto">
		<header className="flex flex-col items-start gap-2 mt-10">
		<div className="flex items-center gap-2">
		<Avatar
Expand Down