有没有办法让素材ui的线性进度条看起来像音乐应用程序的搜索栏？

Question

使用material-ui的线性进度条作为搜索栏，到目前为止，我可以将它与音频持续时间连接起来，并更新当前的播放位置。但我希望这个栏可以像任何媒体网站中的搜索栏一样被点击，并在特定的时间戳播放音频/视频。

下面是我的线性进度条的代码：

<LinearProgress
          className="top"
          variant="determinate"
          value={(this.state.currentTime * 100) / this.state.duration}
        />

Answer 1

<span style={{width: your wudth}}>
  <Slider style={{width: videoRef.current?.clientWidth ? videoRef.current?.clientWidth-176.5 : 0}}
          min={0}
          max={duration}
          value={currentTime}
          onChange={handleProgressChange}
          aria-labelledby="continuous-slider"
  />
</span>

const handleProgressChange = (e: any, value: any) => {
  videoRef.current!.currentTime = value;
  e.preventDefault();
}