0

У меня есть кастомный плеер, стилизованный мной. По клику на прогрессбар, перематывается аудиофайл. Я хочу сделать еще и так чтобы при перетаскивании ползунка аудиофайл перематывался. Причем чтобы визуально его нельзя было вытащить за пределы контейнера. Хотел также узнать возможно ли это сделать без input, т.к. изначально я его не использовал. Также интересно какое событие отслеживать при перетаскивании. Достаточно будет максимально простого примера как это можно реализовать

Вот на таком примере https://jsfiddle.net/dftx5b8n/

.range {
  width: 200px;
  height: 10px;
  border-radius: 12px;
  background-color: darksalmon;
}
.line {
  width: 30%;
  height: 10px;
  border-radius: 12px;
  background-color: aquamarine;
  position: relative;
}
.circle {
  position: absolute;
  right: -7px;
  top: -3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #f7f8fa;
  border: 2px solid blue;
}
<div class="range">
  <div class="line">
    <div class="circle"></div>
  </div>
</div>

1 ответ 1

1

Сделал тебе Range. Демка здесь. Здесь 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))
  }
}
2

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.