Numeric values from TextField

[rhard]

Is there any way how to receive the number from TextField instead of string? The next code returns string:

let value = 0;
...
<TextField type="number" bind:value={value}>Numeric field</TextField>

[Florian-Schoenherr]

We would need to change from binding to using on:input to do that. Would you mind doing this instead?

<TextField on:input={(e) => value = +e.target.value}>Numeric field</TextField>

[rhard]

Thanks for the suggestion. I currently fixed it by using:

    $: nbrSlowInterval = Number(strSlowInterval);
    $: nbrWeatherInterval = Number(strWeatherInterval);

[Florian-Schoenherr]

@rhard keep it DRY 😉

<TextField on:input={() => nbrSlowInterval = Number(e.target.value)}>SlowInterval</TextField>
<TextField on:input={() => nbrWeatherInterval = Number(e.target.value)}>WeatherInterval</TextField>

But you probably want native input-number functionality (like these little arrows), right?

[rhard]

Exactly! I was expecting this is already there like in others frameworks by default.

[Florian-Schoenherr]

TextField uses <input type="text" bind:value> inside, sadly <input {type} bind:value> is not possible, svelte forbids it. We could change to use <input {type} {value} on:input={(e) => parse(type, e.target.value)}> or something like that. Might be less performant.. probably gonna add <NumberField/> instead, because we will also have <DatePicker/>.

For now, maybe it would look more "material" to use a Slider instead.

[frankieali]

Can't you use e.target.valueAsNumber when type="number" is set?