无控制的范围输入

渲染一个无控制的范围输入元素，使用回调函数将其值传递给父组件。

• 将 <input> 元素的 type 设置为 "range" 来创建一个滑块。
• 使用从父组件传递下来的 defaultValue 作为无控制输入字段的初始值。
• 使用 onChange 事件触发 onValueChange 回调函数，并将新值发送给父组件。

const Slider = ({
  min = 0,
  max = 100,
  defaultValue,
  onValueChange,
  ...rest
}) => {
  return (
    <input
      type="range"
      min={min}
      max={max}
      defaultValue={defaultValue}
      onChange={({ target: { value } }) => onValueChange(value)}
      {...rest}
    />
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(
  <Slider onValueChange={val => console.log(val)} />
);