Skip to content

Commit 0d1d08d

Browse files
committed
fix: debounce slider to avoid laggy behavior
1 parent d7b1253 commit 0d1d08d

File tree

1 file changed

+22
-20
lines changed

1 file changed

+22
-20
lines changed

site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,8 @@ export const DynamicParameter: FC<DynamicParameterProps> = ({
7777
/>
7878
<div className="max-w-lg">
7979
{parameter.form_type === "input" ||
80-
parameter.form_type === "textarea" ? (
80+
parameter.form_type === "textarea" ||
81+
parameter.form_type === "slider" ? (
8182
<DebouncedParameterField
8283
id={id}
8384
parameter={parameter}
@@ -408,6 +409,26 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
408409
</Stack>
409410
);
410411
}
412+
413+
case "slider":
414+
return (
415+
<div className="flex flex-row items-baseline gap-3">
416+
<Slider
417+
id={id}
418+
className="mt-2"
419+
value={[Number.isFinite(Number(localValue)) ? Number(localValue) : 0]}
420+
onValueChange={([value]) => {
421+
setLocalValue(value.toString());
422+
}}
423+
min={parameter.validations[0]?.validation_min ?? 0}
424+
max={parameter.validations[0]?.validation_max ?? 100}
425+
disabled={disabled}
426+
/>
427+
<span className="w-4 font-medium">
428+
{Number.isFinite(Number(localValue)) ? localValue : "0"}
429+
</span>
430+
</div>
431+
);
411432
}
412433
};
413434

@@ -564,25 +585,6 @@ const ParameterField: FC<ParameterFieldProps> = ({
564585
</div>
565586
);
566587

567-
case "slider":
568-
return (
569-
<div className="flex flex-row items-baseline gap-3">
570-
<Slider
571-
id={id}
572-
className="mt-2"
573-
value={[Number.isFinite(Number(value)) ? Number(value) : 0]}
574-
onValueChange={([value]) => {
575-
onChange(value.toString());
576-
}}
577-
min={parameter.validations[0]?.validation_min ?? 0}
578-
max={parameter.validations[0]?.validation_max ?? 100}
579-
disabled={disabled}
580-
/>
581-
<span className="w-4 font-medium">
582-
{Number.isFinite(Number(value)) ? value : "0"}
583-
</span>
584-
</div>
585-
);
586588
case "error":
587589
return <Diagnostics diagnostics={parameter.diagnostics} />;
588590
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy