Триггер изменения в ползунке ввода с помощью MouseEvent в зависимости от положения

Question

с заданным кодом:

var i = document.createElement("input");
i.type='range';
i.style.width = window.innerWidth + 'px';
i.style.height=window.innerHeight + 'px';
i.style.position = "absolute";
i.style.top = 0;
i.style.left = 0;
document.body.appendChild(i);

Я получаю ползунок, покрывающий что-то вроде всего окна просмотра, и где бы я ни щелкал, я перемещаю точку ползунка в эквивалентную позицию x. Когда я пытаюсь смоделировать щелчок мыши на элементе ввода диапазона, чтобы переместить ползунок с помощью MouseEvent, я не получаю тот же результат

var evt = new MouseEvent('click', {
    button: 0,
    detail: 1,
    screenX: 20,
    screenY: 50,
    clientX: 20,
    clientY: 50,
    bubbles: true,
    composed: true
});
i.dispatchEvent(evt);

Как я могу активировать ползунок для перемещения в соответствующую позицию x точно так же, как с помощью мыши?

Answer 1

Входы диапазона определяют свое положение на основе их значения, максимального и минимального значений.Вам не нужно идти так далеко, как имитировать щелчок мышью;просто установите его значение соответственно.Вы не устанавливаете min и max самостоятельно при создании входа, поэтому он будет использовать диапазон по умолчанию [0, 100].Что на самом деле делает математику довольно простой.

В общем, вы бы получили ползунок в правильном положении с этой формулой:

i.value = (desired_x - min_x) / width * (max - min) + min

Так как max = 100, min = 0, min_x= 0 и width = window.innerWidth, что упрощает это:

i.value = desired_x / window.innerWidth * 100