<drayman-number-field />

Number field powered by Angular Material library.

export const component: DraymanComponent = async ({ forceUpdate }) => {
    let celsius;
    let fahrenheit;
    let typing = false;

    return () => {

        return (
            <div>
                <drayman-number-field
                    value={fahrenheit}
                    label="Temperature in Fahrenheit (°F)"
                    onValueChangeStart={async () => {
                        typing = true;
                        await forceUpdate();
                    }}
                    onValueChange={async ({ value }) => {
                        typing = false;
                        fahrenheit = value;
                        celsius = (value - 32) / 1.8;
                        await forceUpdate();
                    }}
                />
                <div>{celsius && `${fahrenheit}°F = ${Math.round(celsius * 100) / 100}°C`}</div>
                <div>{typing ? `You are typing!` : `You aren't typing!`}</div>
            </div>
        )
    };
}