diff --git a/components/SliderTableField/index.tsx b/components/SliderTableField/index.tsx index ff2409d2..07f86ff1 100644 --- a/components/SliderTableField/index.tsx +++ b/components/SliderTableField/index.tsx @@ -21,11 +21,11 @@ interface Props { } const SliderTableField = (props: Props) => { - const [value, setValue] = useState(props.value) + const [value, setValue] = useState(0) useEffect(() => { if (props.value !== undefined && props.value !== value) - setValue(props.value) + if (props.value) setValue(props.value) }, [props.value]) useEffect(() => { @@ -40,10 +40,14 @@ const SliderTableField = (props: Props) => { setValue(value[0]) } - function handleInputChange(event: React.ChangeEvent) { + function onInputChange(event: React.ChangeEvent) { setValue(parseInt(event.currentTarget?.value)) } + function onValueChange(value: number[]) { + setValue(value[0]) + } + return ( { min={props.min} max={props.max} step={props.step} - value={[value ? value : 0]} - onValueChange={handleValueChange} + value={[value]} + onValueChange={onValueChange} onValueCommit={handleValueCommit} /> { min={props.min} max={props.max} step={props.step} - onChange={handleInputChange} + onChange={onInputChange} /> )