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

范围输入根据其值，最大值和最小值确定其位置。您不需要做的只是模拟鼠标单击。只需相应地设置其值即可。创建输入时，您无需自己设置最小值和最大值，因此它将使用默认范围[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

根据位置使用MouseEvent触发输入滑块中的更改

1 个答案: