fix(ui): fix number format for the input slider

[madeindjs]

When importing a slider, the initial value is '', which throws an error like TypeError: "".toFixed is not a function.

Also, we don't handle the step change correctly, which can leads to RangeError: precision -1 out of range

Screencast.from.2024-09-30.00-55-44.mp4

[FabienArcellier]

regarding the behavior of model, I think we should also write this change

const progress = computed(() => {
	const v =
		typeof model.value !== "number" ? Number(model.value) : model.value;

	return ((v - props.min) / (props.max - props.min)) * 100;
});

Avoiding that

[madeindjs]

It's a good point, the thing is the empty state is always a string because of this

writer-framework/src/ui/src/renderer/useFormValueBroker.ts

Line 113 in 9f4af7b

formValue.value = "" as T;

Which make things a bit weird to handle... That's why I choose to put the thumb in the middle.

In fact, I can't display 0 neither because the min could be greater. Thus, I think the best fix is to display nothing in this situation like this :

const displayValue = computed(() => {
	if (typeof model.value !== "number") return "";
	return Number(model.value).toFixed(precision.value);
});

I updated it, well spoted

[FabienArcellier]

I feel the experience is not great for the user.

and something like that ? It will render

const displayValue = computed(() => {
	const v = model.value !== "" ? model.value : props.min;
	return Number(v).toFixed(precision.value);
});

const progress = computed(() => {
	const v = model.value !== "" ? model.value : props.min;
	return ((v - props.min) / (props.max - props.min)) * 100;
});