slider.onpointerdown = e => {
slider.onpointermove = e => (slider.style.transform = `translate(${e.clientX - 70}px)`);
slider.setPointerCapture(e.pointerId);
};
slider.onpointerup = e => {
slider.onpointermove = null;
slider.releasePointerCapture(e.pointerId);
};
<div id=contauner style='border-style: solid'>
<div id=polzunok style='width: 10px; height: 15px; background: red'></div>
</div>
<div id="slider" style='width: 140px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: #fbe;'>SLIDE ME</div>
Как выполнить что то похожие на ползунке, так же как с блоком 'SLIDE ME'.
Зажимая левую кнопку на сладе, становится возможным перемещать блок не зависимо от того, находится ли курсор на блоке или нет.
Собственно вопрос в том, как выполнить так же с ползунком, только не перемещая блок, а задавая ширину блоку id=polzunok
Доработал один из ответов
contauner.onpointerdown = e => {
contauner.onpointermove = e => (polzunok.style.width = e.offsetX + 'px');
contauner.setPointerCapture(e.pointerId);
};
contauner.onpointerup = e => (contauner.onpointermove = null);
<div id=contauner style='margin-left:10%; width: 80%; border-style: solid'>
<div id=polzunok style='width: 10px; height: 15px; background: red'></div>
</div>