vue 音乐进度条拖拽

音乐进度条拖拽这个点卡了我2天，遇到了很多问题，一开始我的思路是自定义设计一个进度条，进度条按时间推移和点击进度条跳转音乐播放都能实现了，但最后滑动进度条卡住了，一开始尝试mousedown，mousemove，mouseup实现，但鼠标移出区域后进度条就会停止，达不到我想要的效果，我能力有限，不知道要怎么实现。

之后想到input有个range类型，就试了试，发现简单很多。

<input
  type="range"
  class="musicBar"
  ref="musicBar"
  v-model="musicBar"
  min="0"
  max="600"
  @change="changeBar()"
  @input="inputBar()"
  :style="{
   
    background:
      '-webkit-linear-gradient(#ff4e4e, #ff4e4e) 0% 0% / ' +
      (musicBar * 100) / 600 +
      '% 100% no-repeat',
  }"

监听播放时长，增加musicBar的值，进度条会随时间变化而变化，
onchange获得musicBar的值改变播放时长，将时长赋值给audio

//this.$store.state.mDuration为歌曲实时播放时长
//this.$store.state.reMusicDuration为歌曲总时长
data() {
   
  return {
   
    isPlayMusic: "",
    progressLong: "",
    volume: 100, //音量
    musicBar: 0, //进度条的value值
    isBar: true, //
  };
},
methods: