setPointerCapture API

How to detect an element under when the pointer is captured.

by Roman Bruckner

HTML

<p>Paragraph under slider.</p>
<div id="slider">SLIDE ME</div>

CSS

div {
  width: 140px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fbe;
  position: absolute;
  top: 0;
  left: 0;
  user-select: none;
}

p {
  display: inline;
  background: lightblue;
}

JavaScript

function beginSliding(e) {
  slider.onpointermove = slide;
  slider.setPointerCapture(e.pointerId);
  slider.style.cursor = 'none';
}

function stopSliding(e) {
  slider.onpointermove = null;
  slider.releasePointerCapture(e.pointerId);
  slider.style.cursor = '';
}

function slide(e) {
  slider.style.transform = `translate(${e.clientX - 70}px)`;
  const { x, y, width, height } = slider.getBoundingClientRect();
  const [,elementUnderSlider] = document.elementsFromPoint(x + width / 2, y + height / 2);
  if (elementUnderSlider) {
    console.log('Element under the slide is:', elementUnderSlider.tagName);
  }
}

const slider = document.getElementById('slider');

slider.onpointerdown = beginSliding;
slider.onpointerup = stopSliding;