输入范围滑块 iOS Safari 性能不佳

Question

我为 NextJS 应用程序创建了一个简单的范围滑块组件。它使用

<input type="range">

元素。

它在桌面和 Android 上按预期工作，但在 iOS Safari 中几乎无法使用。元素并没有真正移动，更新很慢。

它是受控输入，因为该值必须在另一个元素之外呈现。

type Props = {
  onChangeValue: (value: number) => void;
};

export default function RangeSlider({ onChangeValue }: Props) {
  const [value, setValue] = useState(50);

  const handleChange: ChangeEventHandler<HTMLInputElement> = ({
    target: { value },
  }) => {
    const newValue = parseInt(value);
    if (typeof newValue !== "number") {
      return;
    }
    setValue(newValue);
    onChangeValue(newValue);
  };

  return (
    <>
      <p>{value}</p> 
      <input
        type="range"
        value={value}
        min={1}
        step={1}
        max={100}
        onChange={handleChange}
      />
    </>
  );
}

我是否遗漏了什么，或者这是 Safari 中的一个错误？ 我可以做任何潜在的优化吗？ 我考虑过使用完整的滑块库，但对于这么小的输入，这对我来说似乎有点尴尬。您能推荐一些小型且高性能的库吗？

Answer 1

代码看起来不错。我将问题追溯到另一个组件（react-spring-bottom-sheet）。我用react-modal-sheet替换它，问题就消失了。

Answer 2

您应该尝试使用参考文献，希望它会有所帮助