拖动音频播放器滑块

让你成为一个范围。演示在这里。这是JS：

class Range{
  constructor(parent, handler, {from = 0, to = 100, step = 1, defaultValue = null} = {})
  {
    //навешиваем все заданные значения
    this.from = from;
    this.to = to;
    this.step = step;
    this.handler = handler.bind(this);
    
    //готовим свойства для будущей записи
    this.value;
    this.persentValue;
    
    //определяем шаг в процентах
    this.persentStep = step * 100 / (this.to - this.from);
    
    //свойства в которых будем хранить dom узлы
    this._parent = parent;
    this._wrap;
    this._range;
    this._progressLine;
    this._offsetPointer;
    
    //создаем dom нашего range
    this._createHTML();
    //устанавливаем дефолтное знание
    this._setDefaultValue(defaultValue);
  }
  //считаем сколько шагов поместится в значение | нужно для того чтобы значения были кратны нашем шагу (любое некратное мы преобразовываем в ближайшее кратное)
   _countSteps(value)
  {
    return Math.round(value/this.persentStep);
  }
  //берем процентное значение об обычного значения
  _getPersentValue(value)
  {
    let fullPersentValue = ((value - this.from) * 100)/(this.to - this.from);
    let perstentStepsCount = this._countSteps(fullPersentValue);
    return perstentStepsCount * this.persentStep;
  }
  //устанавливаем дефалтное значение
  _setDefaultValue(defaultValue)
  {
    let persentDefaultValue;
    //если больше или меньше устанавливаем максимальное или минимальное процентное значение соответственно
    if(!defaultValue || defaultValue <= this.from ) persentDefaultValue = 0;
    else if(defaultValue >= this.to) persentDefaultValue = 100;
    //если в рамках тогда переводим дефалтное значение в процентную форму
    else persentDefaultValue = this._getPersentValue(defaultValue);
   
   //устанавливаем процентное значение
    this._setPersentValue(persentDefaultValue);
  }
  //тут создаем наш dom
  _createHTML()
  {
    this._wrap = document.createElement("div");
    this._wrap.className = "wrap";
    this._range = document.createElement("div");
    this._range.className = "range";
    this._progressLine = document.createElement("div");
    this._progressLine.className = "progress-line";
    this._offsetPointer = document.createElement("div");
    this._offsetPointer.className = "offset-pointer";
    
    this._progressLine.appendChild(this._offsetPointer);
    this._range.appendChild(this._progressLine);
    this._wrap.appendChild(this._range);
    this._parent.appendChild(this._wrap);
    //тут будем вешать обработчики событий
    this._setOnMoveHandler();
  }
  //тут устанавливаем обычное значение
  _setValue(value)
  {
    this.value = value;
    this.handler(this.value, this.persentValue);
  }
  //это используюем для внешней установки значения
  setValue(value)
  {
    //переводим наше значение в процентную форму
    this._setDefaultValue(value);
  }
  //устанавливаем процентное значение
  _setPersentValue(persentValue)
  {
    this.persentValue = persentValue;
    //переводим процент в обыкновенное значение
    let newValue = this.from + (this.persentValue * (this.to - this.from))/100;
    //тут отображаем наш progress-line
    this._setRangeOffset();
    //устанавливаем обычное значение
    this._setValue(newValue);
  }
  //отображаем progress-line
  _setRangeOffset()
  {
    this._progressLine.style.width = `${this.persentValue}%`;
  }
  //навешиваем нужные обработчики
  _setOnMoveHandler()
  {
    //движение начинается по событию mousedown на range
    function startMoving(e)
    {
      //берем координаты нашего range и получаем все прочие параметры
      const rangeCords = this._range.getBoundingClientRect();
      const rangeRight = rangeCords.right;
      const rangeLeft = rangeCords.left;
      const rangeWidth = rangeRight - rangeLeft;
      //обработчик mousemove по окну
      const Moving = function(e)
      {
        //смотрим какой x у нашего курсора
        const x = e.clientX;
        let _persentValue;
        //если x меньше или больше начала или конца нашего range тогда соответственно ставим минимальное или максимальное значение
        if(x <= rangeLeft) _persentValue = 0;
        else if(x >= rangeRight) _persentValue = 100;
        //в противном случае берем разницу x - rangeLeft и переводим ее в процент с учетом кратности шага
        else{
          let offsetValue = x - rangeLeft;
          let fullPersentValue = (offsetValue * 100)/rangeWidth;
          let persentStepsCount = this._countSteps(fullPersentValue);
          _persentValue = persentStepsCount * this.persentStep;
        }
        //устанавливаем процентное значение
        this._setPersentValue(_persentValue);
      }.bind(this);
      //вызываем функцию при клике (это нужно чтобы обработчик сработал даже если пользователь просто кликнет по range)
      Moving(e);
      //функция для подчистки всех наших обработчиков после того как пользователь закончит работу с ползунком
      function Cleaning()
      {
        window.removeEventListener("mousemove", Moving);
        window.removeEventListener("mouseup", Cleaning);
      }
      //навешиваем событие на движение мыши по окну 
      window.addEventListener("mousemove", Moving);
      //удаляем все события после того как кнопка мыши отжата
      window.addEventListener("mouseup", Cleaning);
    }
    //навешим события на клик по range
    this._range.addEventListener("mousedown", startMoving.bind(this))
  }
}