写的 React 组件有 bug，知道原因但不会解决，求教

完整代码： https://codesandbox.io/p/sandbox/d8kjg2

最近自娱自乐时，写了一个类似高中物理的木板-滑块组件，可以根据木板的角度来控制小球的位置，见图： https://imgur.com/a/Eo2briC

组件有个问题，在旋转到 90 度附近时，值会突然从 0 跳到 100： https://imgur.com/a/kWmm3I4

我知道问题出在 handleMouseMove 函数里，斜率 k 在 90 度附近发生了跳变，但不会解决，求教

准确的说法是： 垂直后，继续往左右两边旋转的正负值导致的。 考虑到另外一点，放开后回归到水平的位置时数值要保留一致，就是 0 位置松开鼠标后还是 0 ，100 位置松开鼠标后还应该是 100 ，我认为这个算正常效果，不是 Bug 。

90 度顺时针再旋转是 0 ，逆时针再旋转就是 100 我感觉逻辑没问题

好家伙，用这个滑块调整音量，人都要疯 1L 说得对，feature

@MozzieW 其实这个也是斜率跳变导致的。rotate 角度从正跳到负，看起来 0 的位置没变，但实际上原先 0 的位置变成了 100 ，所以过渡动画看起来奇怪