如何创建依赖输出的sliderInput？

import React, { useState } from 'react';

const SliderInput = () => {
  const [value, setValue] = useState(0);

  const handleChange = (event) => {
    const newValue = event.target.value;
    setValue(newValue);
  };

  return (
    <div>
      <input type="range" min="0" max="100" value={value} onChange={handleChange} />
      <input type="number" value={value} onChange={handleChange} />
    </div>
  );
};

const ParentComponent = () => {
  const [output, setOutput] = useState(0);

  const handleOutput = () => {
    // 根据滑块的值和其他依赖的输入，计算输出值
    const newOutput = // 根据需要计算输出值的逻辑
    setOutput(newOutput);
  };

  return (
    <div>
      <SliderInput />
      <button onClick={handleOutput}>计算输出</button>
      <p>输出值：{output}</p>
    </div>
  );
};