{parameter.form_type === "input" || - parameter.form_type === "textarea" ? ( + parameter.form_type === "textarea" || + parameter.form_type === "slider" ? ( ) : ( void; disabled?: boolean; id: string; - isPreset?: boolean; } const DebouncedParameterField: FC = ({ @@ -259,7 +258,6 @@ const DebouncedParameterField: FC = ({ onChange, disabled, id, - isPreset, }) => { const [localValue, setLocalValue] = useState( value !== undefined ? value : validValue(parameter.value), @@ -271,13 +269,13 @@ const DebouncedParameterField: FC = ({ const prevDebouncedValueRef = useRef(); 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 @@ -408,6 +406,31 @@ const DebouncedParameterField: FC = ({ ); } + + case "slider": { + const numericValue = Number.isFinite(Number(localValue)) + ? Number(localValue) + : 0; + const { validation_min: min = 0, validation_max: max = 100 } = + parameter.validations[0] ?? {}; + + return ( +

+ { + setLocalValue(value.toString()); + }} + min={min ?? undefined} + max={max ?? undefined} + disabled={disabled} + /> + {numericValue} +

+ ); + } } }; @@ -564,25 +587,6 @@ const ParameterField: FC = ({

- { - onChange(value.toString()); - }} - min={parameter.validations[0]?.validation_min ?? 0} - max={parameter.validations[0]?.validation_max ?? 100} - disabled={disabled} - /> - - {Number.isFinite(Number(value)) ? value : "0"} - -