Почему круг ползунка исчезает, когда моя мышь покидает звуковую панель?

Question

Я работаю над аудиоплеером, и я пытаюсь, чтобы ползунок (круг ползунка) появлялся, когда пользователь наводит курсор на timeline. Тогда пользователь должен иметь возможность перетаскивать ползунок, не удерживая мышь на звуковой панели (timeline). Но сейчас, когда я пытаюсь сделать эффект наведения, мышь пользователя должна оставаться на временной шкале, чтобы работать. Однако, если я не использую эффект наведения, а просто отображаю перетаскивание ползунка (круг ползунка), пользователь может перетаскивать его, даже если его мышь не находится непосредственно над временной шкалой. Как заставить движок ползунка двигаться, даже если мышь пользователя не зависает непосредственно над временной шкалой?

// my css

#timeline{
    width: 500px;
    height: 4px;
    border-radius: 15px;
    background: $audio-slider-gray; 
    margin-top: 15px;

    #handle{
      width: 13px;
      height: 13px;
      border-radius: 50%;
      margin-top: -4px;
      background: $white;
      transform: scale(0);
    }
  }

  #timeline:hover {
    #handle {
      transform: scale(1);
    }
  }

// мой компонент аудиоплеера

import React from 'react';

class AudioPlayer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { play: false };  
    this.play = this.play.bind(this);
    this.positionHandle = this.positionHandle.bind(this);
    this.mouseMove = this.mouseMove.bind(this);
    this.mouseDown = this.mouseDown.bind(this);
    this.mouseUp = this.mouseUp.bind(this);
  }

  componentWillReceiveProps() {
    this.setState({ play: true });
  }

  componentDidMount() {
    this.audio.addEventListener("timeupdate", () => {
      let ratio = this.audio.currentTime / this.audio.duration;
      let position = (this.timeline.offsetWidth * ratio) + this.timeline.offsetLeft;
      this.positionHandle(position);
    });
  }

  play() {
    if (this.state.play) {
      this.setState({ play: false });
      this.audio.pause();
    } else {
      this.setState({ play: true });
      this.audio.play();
    }
  }

  positionHandle(position) {
    let timelineWidth = this.timeline.offsetWidth - this.handle.offsetWidth;
    let handleLeft = position - this.timeline.offsetLeft;

    if (handleLeft >= 0 && handleLeft <= timelineWidth) {
        this.handle.style.marginLeft = handleLeft + "px"; 
    }

    if (handleLeft < 0) {
        this.handle.style.marginLeft = "0px";
    }

    if (handleLeft > timelineWidth) {
        this.handle.style.marginLeft = timelineWidth + "px";
    }
  }

  mouseMove(e) {
    this.positionHandle(e.pageX);
    this.audio.currentTime = ((e.pageX - this.timeline.offsetLeft) / this.timeline.offsetWidth) * this.audio.duration;
  }

  mouseDown(e) {
    window.addEventListener('mousemove', this.mouseMove);
    window.addEventListener('mouseup', this.mouseUp);
  }

  mouseUp(e) {
    window.removeEventListener('mousemove', this.mouseMove);
    window.removeEventListener('mouseup', this.mouseUp);
  };

  render() {
    const { audio } = this.props; 

    return (
      <div className="audio-player-container">
        <div onClick={this.play} className={!this.state.play ? "ap-play-icon" : "ap-pause-icon"} />
        <audio src={audio} ref={audio => { this.audio = audio } } autoPlay />

        <div id="timeline" onClick={this.mouseMove} ref={(timeline) => { this.timeline = timeline }}>
          <div id="handle" onMouseDown={this.mouseDown} ref={(handle) => { this.handle = handle }} />
        </div>
      </div> 
    );  
  }
}

export default AudioPlayer;