Как с помощью js скрипта передвинуть ползунок на сайте

Question

Есть на сайте вот такой ползунок (картинка ниже), который я хочу подвинуть в самое левое положение при помощи js скрипта (jquery). Ползунок состоит из 3 дивов. Его можно передвинуть просто нажав в начало ползунка мышкой. Кст если удалить див фона ползунка то нажатием его уже не сдвинуть, но всё ещё можно перетянуть за белую точку. В начале попытался отправить нажатие по диву фона ползунка и тому что розовый при помощи .click(), но это не дало результатов. Решил попытаться нажать просто по координатам таким кодом:

function click(x, y)
{
    var ev = new MouseEvent('click', {
        'view': window,
        'bubbles': true,
        'cancelable': true,
        'screenX': x,
        'screenY': y
    });

    var el = document.elementFromPoint(x, y);

    el.dispatchEvent(ev);
}

10 раз перепроверил правильность координат, корректировал их чтобы попасть в центр ползунка, а не в область закругления, но ползунок никак не реагировал. При этом все кнопки на этом сайте прекрасно нажимаются обоями способами. Как же мне можно взаимодействовать с этим ползунком?

<div draggable="false" class="noselect" style="position: absolute; margin-left: 110px; margin-top: 250px; width: 320px; height: 30px; background-color: rgb(38, 15, 42); border-radius: 30px; display: block; opacity: 1;"></div>
<div draggable="false" class="noselect" style="position: absolute; margin-left: 110px; margin-top: 250px; width: 129.75px; height: 30px; background-color: rgb(210, 49, 128); border-radius: 30px; pointer-events: none; display: block; opacity: 1;"></div>
<div draggable="false" class="offLightTap" style="position: absolute; margin-left: 209.75px; margin-top: 248px; width: 35px; height: 35px; background-color: rgb(238, 238, 238); border-radius: 35px; cursor: pointer; display: block; opacity: 1;"></div>

Answer 1

Вот один из вариантов

const leftDiv = document.getElementById('left');
const righttDiv = document.getElementById('right');
const pols = document.getElementById('pols');

let min = 120;
let max = 440;

const mouseDownEvent = function(el) {
  let start = el.clientX;
  
  const move = function(e) {
    let mousePointer = e.clientX;
    if (mousePointer < min) mousePointer = min;
    if (mousePointer > max) mousePointer = max;
    let sdvig = start - mousePointer;
    let margin = Number(pols.style.marginLeft.replace('px', ''));
    pols.style.marginLeft = (margin - sdvig) + 'px';
    let w = Number(righttDiv.style.width.replace('px', ''));
    righttDiv.style.width = (w - sdvig) + 'px';
    start = mousePointer;
  }
    
  document.addEventListener('mousemove', move);
  const clear = function() {
    document.removeEventListener('mousemove', move);
    document.removeEventListener('mouseup', clear);
  }
  
  document.addEventListener('mouseup', clear);
}

pols.addEventListener('mousedown', mouseDownEvent);

<div id='left' draggable="false" class="noselect" style="position: absolute; margin-left: 110px; margin-top: 20px; width: 320px; height: 30px; background-color: rgb(38, 15, 42); border-radius: 30px; display: block; opacity: 1;"></div>
<div id='right' draggable="false" class="noselect" style="position: absolute; margin-left: 110px; margin-top: 20px; width: 129.75px; height: 30px; background-color: rgb(210, 49, 128); border-radius: 30px; pointer-events: none; display: block; opacity: 1;"></div>
<div id='pols' draggable="false" class="offLightTap" style="position: absolute; margin-left: 209.75px; margin-top: 18px; width: 35px; height: 35px; background-color: rgb(238, 238, 238); border-radius: 35px; cursor: pointer; display: block; opacity: 1;"></div>

БЛОГ НА HUSL

Как с помощью js скрипта передвинуть ползунок на сайте

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