Реализация ползунка

Question

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>

Answer 1

Поменять в js slider на polzunok и slider.style.transform = translate(${e.clientX - 70}px) на polzunok.style.width = e.clientX+'px' (и ещё для contauner можно добавить overflow: hidden):

polzunok.onpointerdown = e => {

  polzunok.onpointermove = e => (polzunok.style.width = e.clientX+'px');

  polzunok.setPointerCapture(e.pointerId);

};

polzunok.onpointerup = e => {
  polzunok.onpointermove = null;
  polzunok.releasePointerCapture(e.pointerId);
};

<div id=contauner style='border-style: solid; overflow: hidden'>
    <div id=polzunok style='width: 10px; height: 15px; background: red'></div>
</div>
<div></div>

Answer 2

Основная логика взята из документации:

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);
};

const polzunok = document.querySelector('#polzunok');
const contauner = document.querySelector('#contauner');

const beginSliding = (e) => {
  contauner.onpointermove = slide;
  contauner.setPointerCapture(e.pointerId);
}

const stopSliding = (e) => {
  contauner.onpointermove = null;
  contauner.releasePointerCapture(e.pointerId);
}

const slide = (e) => {
  // Отнимаем 2 из-за ширины border-а
  polzunok.style.width = e.clientX - contauner.getBoundingClientRect().left - 2 + 'px';
}

contauner.onpointerdown = beginSliding;
contauner.onpointerup = stopSliding;

<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>

Answer 3

Предлагаю вариант ползунка с привязкой к видео. Теперь кликая по нему можно устанавливать не только его ширину, но и соответствующий момент (кадр) воспроизведения видео:

<style>
#contayner{
    border-style: solid;
}
#polzunok{
    height: 15px;
    background: red;
}
</style>
<video id=video src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" width="300" controls></video><br /><br />
<div id=contayner><div id=polzunok></div></div>
<script>
let progressWidth = 300; // ширина прогрессбара
let x = polzunok.getBoundingClientRect().left;
contayner.style.width = progressWidth + "px";
const step = () => {
    polzunok.style.width = video.currentTime / video.duration * progressWidth + "px";
    requestAnimationFrame(step);
}
step();
const newposition = e => {
    polzunok.style.width = e + 'px';
    video.currentTime = e / progressWidth * video.duration;
}
polzunok.onpointerdown = contayner.onpointerdown = e1 => {
    let newwidth = e1.clientX - x;
    newposition(newwidth);
    polzunok.onpointermove = e => {
        let newwidth = e.clientX - x;
        newposition(newwidth);
    }
    polzunok.setPointerCapture(e1.pointerId);
}
polzunok.onpointerup = e => {
    polzunok.onpointermove = null;
    polzunok.releasePointerCapture(e.pointerId);
}
</script>

Это может быть дополнением к этому вопросу: Плавное перемещение ползунка у видео

БЛОГ НА HUSL

Реализация ползунка

Ответы (3 шт):