Ползунок на JavaScript

Создаем кастомный слайдер (ползунок) на JavaScript с использованием drag-and-drop техники.

See the Pen dnd-slider by FurryCat (@mohnatus-the-lessful) on CodePen.

Эта имитация позволяет вычислять относительное положение ползунка в процентах.

Верстка

<div id="slider">
  <div id="item"></div>
</div>

<div id="result">0%</div>

Стили

#slider {
  width:300px;
  margin-left:20px;
  height:10px;
  background: black;
  border-radius:10px;
  margin-top:45px;
}

#item {
  width:10px;
  height:30px;
  position:relative;
  top:-10px;
  left:0px;
  background:yellow;
  border-radius:10px;
  border:1px solid black;
}

#result {
  margin:20px;
}

Ползунок имеет position:relative, это определяет механизм вычислений позиции.

Скрипт

let slider = document.getElementById('slider');
let item = slider.querySelector('#item');
let result = document.getElementById('result');

// Координаты слайдера относительно страницы
let sliderRect = slider.getBoundingClientRect();
let sliderRectWithScroll = {};
sliderRectWithScroll.top = sliderRect.top + pageYOffset;
sliderRectWithScroll.left = sliderRect.left + pageXOffset;

// Зажатие кнопки мыши на ползунке
item.onmousedown = function(e) {
  
   // Отмена нативного drag and drop поведения
	 item.ondragstart = function() {
      return false;
   };
    
   // Координаты ползунка относительно страницы
   let itemRect = item.getBoundingClientRect();
   let itemRectWithScroll = {};
   itemRectWithScroll.top = itemRect.top + pageYOffset;
	 itemRectWithScroll.left = itemRect.left + pageXOffset;
   
   // Крайнее правое положение, которого может достичь ползунок
   let rightBoundary = slider.offsetWidth - item.offsetWidth;
   
   // Смещение курсора относительно начала ползунка
   let shiftX = e.pageX - itemRectWithScroll.left;
   
   // Перетаскивание ползунка при движении мыши
   document.onmousemove = function(e) {
   		let newLeft = e.pageX - sliderRectWithScroll.left - shiftX;
     
      // Ползунок не может выходить за границы
      if (newLeft < 0) newLeft = 0;
      if (newLeft > rightBoundary) newLeft = rightBoundary;
      item.style.left = newLeft + 'px';
     
      // Обновление результата
      result.innerHTML = Math.round(newLeft / rightBoundary * 100) + '%';
   }
   
   // Сброс при отпускании кнопки мышки 
   document.onmouseup = function(){
   		document.onmousemove = null;
      document.onmouseup = null;
   }
  
  return false;
}

Похожие статьи

• Drag’n’Drop