feat(web): support min and max value for number input type

This commit is contained in:
Luke
2022-08-27 15:54:43 +02:00
parent 0bc185ef38
commit 52ce1c53ae
2 changed files with 38 additions and 27 deletions

View File

@@ -21,10 +21,16 @@ export const debugInput = () => {
{ value: "option3", label: "Option 3" },
],
},
{ type: "number", label: "Number counter", default: 12 },
{
type: "number",
label: "Number counter",
default: 12,
min: 3,
max: 10,
},
{ type: "slider", label: "Slide bar", min: 10, max: 50, step: 2 },
],
},
},
]);
}
};

View File

@@ -24,7 +24,12 @@ const NumberField: React.FC<Props> = (props) => {
return (
<Box mb={3}>
<Text>{props.row.label}</Text>
<NumberInput onChange={(val: string) => props.handleChange(+val, props.index)} defaultValue={props.row.default}>
<NumberInput
onChange={(val: string) => props.handleChange(+val, props.index)}
defaultValue={props.row.default}
min={props.row.min}
max={props.row.max}
>
<NumberInputField placeholder={props.row.placeholder} />
<NumberInputStepper>
<NumberIncrementStepper />