使用antd中原生组件实现获取数字范围的组件

在antd中，我们可以找到选择时间段的组件，如下图所示：

然后在我的项目中需要一个年龄筛选，我计划使用一个这样的输入框，用来表示年龄的范围，但是没有在antd中找到，于是就结合其他原生组件写了一个同等功能的组件，样式如图：

/*
*Row用于定义行
*Col用于定义列，并通过align="middle"来对齐内容
*/
<Row align="middle">
    <Col>
        <InputNumber min={0} max={100} placeholder="最小值" />//年龄最小值为0，最大为100，可根据自己需要来修改
    </Col>
    <Col>
        <div style={{ padding: '0 8px 25px' }}>~</div>
    </Col>
    <Col>
        <InputNumber min={0} max={100} placeholder="最大值" />
    </Col>
</Row>

上述代码只是数字范围的基础代码，下方是加入form后的完整代码：

//除了组件，还写了部分css用于适配原生的Form.Item
import { Form, Row, Col, InputNumber } from 'antd';

()=>{
    const onFinish = (values: any) => {
        console.log('点击提交:', values);
    };

    return (
        <Form
    form={form1}
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    style={{ maxWidth: "100%", padding: "20px", display: "flex", alignItems: 'center', 
justifyContent: "space-between", flexWrap: 'wrap' }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    autoComplete="off"
>
    <div style={{ gridColumn: "1 /3" }}>
        <Row align="middle">
            <Col>
                <Form.Item
                    label="年龄"
                    style={{ marginLeft: "25px" }}
                    name="ageStart"
                >
                    <InputNumber min={0} max={100} placeholder="最小值" />
                </Form.Item>
            </Col>
            <Col>
                <div style={{ padding: '0 8px 25px' }}>~</div>
            </Col>
            <Col>
                <Form.Item
                    name="ageEnd"
                >
                    <InputNumber min={0} max={100} placeholder="最大值" />
                </Form.Item>
            </Col>
        </Row>
    </div>
    <div style={{ display: 'flex' }}>
        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
                查询
            </Button>
        </Form.Item>
        &nbsp;&nbsp;
        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" onClick={() => {
                form1.resetFields()
                setIsSearch(false)
                setRefresh(++refresh)
            }}>
                清空
            </Button>
        </Form.Item>
    </div>
</Form>
    )
}

 引入上述代码就可以正常使用该输入框