Is there a way to remove the last useless zeros from this component using bind:value?

[frederikhors]

I have this simple component (playground here):

<script lang="ts">
    type Props = {
        value?: number | null;
    };

    let {
        value = $bindable(),
    }: Props = $props();
</script>

<input type="number" bind:value />

and in App.svelte:

<script>
    import InputNumber from "./InputNumber.svelte"
    
    let number = "123456.123000000";
</script>

<InputNumber bind:value={number} />

It shows like this:

Is there a way to remove the last useless zeros?

I know I can use Intl.NumberFormat or parseFloat() outside InputNumber.svelte but I need to fix it inside it.

[dangelomedinag]

@frederikhors You can use an object with getters and setters and do the necessary transformation when reading and writing the state.

playground

[kvetoslavnovak]

Your type is number or null. But you are passing a string into number input. If you use number trailing zeroes will be ignored.

If you need to input “text-number” to number input and solve this within the component file you may try:

<script lang="ts">
    type Props = {
        value?: number | null;
    };

    let {
        value = $bindable(),
    }: Props = $props();
    value = parseFloat(value)
</script>

<input type="number" bind:value />

Or update incorrect type using this trick when passing “text-number” to the component?
<InputNumber value={number * 1} />
or
let number = "123456.123000000" * 1