Javascript 反应输入滑块挂钩

我正在创建一个带有React钩子的输入滑块，该钩子显示滑块旁边的数字。我遇到了一个问题，滑块不会向后跟踪，并且在任何方向移动都非常缓慢。在整个屏幕上单击并拖动鼠标会导致滑块移动5个单位。我不知道为什么会发生这种情况，我没有收到任何错误，但我对反应非常陌生，尤其是使用钩子。我的相关代码如下，谢谢您的帮助和建议

JS（巴别塔）：

import React，{useState，useffect}来自“React”；
从“/style”导入{StyledSlider}；
常量滑块=（）=>{
const[value，setValue]=使用状态（120.5）；
返回(
{value}c
缩放比例

设置值（值+1）}
步骤={0.01}
type=“范围”
value={value}
/>
1200 x 1200
)
}
因此，
onChange={（）=>setValue（value+1）}
是不必要的。将其更改为此选项可修复此问题：

const Slider = () => {

  const [value, setValue] = useState(120.5);

  const onUpdate = (e) => {
     setValue(e.target.value);
  }  

  return (
    <div className="slider-box">
      <div>
        <label className="slider-label">{value}c</label>
        <p className="slider-title">Scale</p>
      </div>
      <StyledSlider
        list="tickmarks"
        max={1200}
        onChange={onUpdate}
        step={0.01}
        type="range"
        value={value}
      />
      <div> 
        <p className="slider-scale">1200 x 1200</p>
      </div>
    </div>
  )
}

const滑块=（）=>{
const[value，setValue]=使用状态（120.5）；
const onUpdate=（e）=>{
设定值（即目标值）；
}  
返回(
{value}c
缩放比例

1200 x 1200
)
}
查看使用
setValue（val=>val+1）是否有帮助。
const Slider = () => {

  const [value, setValue] = useState(120.5);

  const onUpdate = (e) => {
     setValue(e.target.value);
  }  

  return (
    <div className="slider-box">
      <div>
        <label className="slider-label">{value}c</label>
        <p className="slider-title">Scale</p>
      </div>
      <StyledSlider
        list="tickmarks"
        max={1200}
        onChange={onUpdate}
        step={0.01}
        type="range"
        value={value}
      />
      <div> 
        <p className="slider-scale">1200 x 1200</p>
      </div>
    </div>
  )
}