PUIMutableNumericStatus

This component allows the user to change a numerical value. Attach to a state variable and provide precision, and a range. When the user clicks on the field, they can enter any value using the keyboard. Upon clicking out of the field or hitting the enter key on their keyboard, the component will check if the value is in range and then apply rounding according to the precision provided.

If the user enters a value that is NaN or outside of the range, the component will set the value to the closes bound provided by the range. For example if you typed 29, it would set the velocity to 10 in the example below.

import {PUIMutableNumericStatus} from "./pstdl-ui";
import {ReactElement, useState} from "react";

export function TestBed(): ReactElement {

	const [velocity, setVelocity] = useState(3);

	return <div className={"TestBed"}>
		<PUIMutableNumericStatus
			value={velocity}
			setValue={setVelocity}
			precision={0}
			range={[0, 10]}
			label={"Velocity"}
		/>
	</div>
}