1  import { InputNumber } from "antd";
 2  
 3  function parseValue(value?: (number | null)[]): [number | null, number | null] {
 4    if (value === undefined) {
 5      return [null, null];
 6    }
 7  
 8    if (!Array.isArray(value) || value.length !== 2) {
 9      return [null, null];
10    }
11  
12    const [min, max] = value;
13  
14    return [min, max];
15  }
16  
17  /**
18   * An Ant Design compatible form input for a number range.
19   * @param props
20   * @returns
21   */
22  export function InputNumberRange(props: {
23    /** Decimal precision */ precision?: number;
24    /** Unit to display */ unit?: string;
25    /** Value state */ value?: (number | null)[] | undefined;
26    /** Called when input changes. Used to update value state. */ onChange?: (value: (number | null)[]) => void;
27  }) {
28    const [min, max] = parseValue(props.value);
29  
30    return (
31      <>
32        <InputNumber
33          value={min}
34          precision={props.precision ?? 0}
35          addonAfter={props.unit}
36          style={{ maxWidth: 110 }}
37          onChange={(value) => {
38            if (props.onChange) {
39              props.onChange([value, max]);
40            }
41          }}
42        />
43        {" \u2013 "}
44        <InputNumber
45          value={max}
46          precision={props.precision ?? 0}
47          addonAfter={props.unit}
48          style={{ maxWidth: 110 }}
49          onChange={(value) => {
50            if (props.onChange) {
51              props.onChange([min, value]);
52            }
53          }}
54        />
55      </>
56    );
57  }