如何使 HTML 输入可以通过滑块和手动输入（键盘）进行更改

Question

我想创建一个可以通过滑块和手动输入更改的输入，就像常规的

<input type="number">

一样。由于 JavaScript，它必须是相同的输入。

例如，这是我编写的代码：

const mph_in = document.getElementById("mph");
const dec_in = document.getElementById("dec");
const t_in = document.getElementById("t");
const out = document.getElementById("out");

mph_in.addEventListener('input', main);
dec_in.addEventListener('input', main);
t_in.addEventListener('input', main);


console.log(mph);

function m2mi(metre){
    return metre/1609.344;

}

function main(){

    // mph = 75.0;
    // dec = 0.9;
    // t = 1.0;


    mph = parseFloat(mph_in.value);
    dec = parseFloat(dec_in.value);
    t = parseFloat(t_in.value);

    v = mph*(1609.344/3600);

    reaction = t * v;

    braking = (v*v)/(2*dec);

    s = reaction + braking;

    console.log("main loaded");
    console.log("reaction distance: "+reaction);

    out.innerHTML = "Reaction distance: "+m2mi(reaction)+" mi<br> Braking distance: "+m2mi(braking)+" mi <br> <b>Stopping distance: "+m2mi(s)+" mi </b>";

}

function test(){
    console.log(m2mi(2000));

    // console.log("v = "+v);
}

<!-- 
  Train speed [mph]: 
  <input type="number" name="mph" id="mph" placeholder="75" value="75">
  <br> 
-->

Train speed [mph]: 
<input type="range" id="mph" name="mph" min="0" max="125" value="75" oninput="this.nextElementSibling.value = this.value"/>
<output></output>

<br>

Deceleration [m/s<sup>2</sup>]: 
<input type="number" name="dec" id="dec" placeholder="0.9" value="0.9">

<br>

Reaction time [s]: <input type="number" name="t" id="t" placeholder="3" value="3">
<br>
    
<button onclick="main()">Calculate</button><br>
<button onclick="test()">Debug</button><br>
<span id="out" >[output]</span>

代码按预期工作，除了速度只能由滑块控制（我也希望使其可以通过手动输入控制，就像其他输入一样），并且减速度和反应时间也可以由滑块控制滑块（不仅仅是手动输入）。有什么办法可以做到这一点吗？

Answer 1

你可以试试这个方法：

当您菜单/滑块输入时，滑块/菜单输入自动更新为值。

您可以尝试自定义事件，或者尝试Vue的

v-modal

（如果您可以使用Vue）。您可以尝试

change

活动。