Javascript 范围输入控制两个不同的字段

我是新来的编码，我必须建立一个抵押贷款模拟器。为此，我有一个范围字段，用户可以选择第一个字段上显示的年数。另一个领域是利率。有没有办法让射程控制速度呢。我想通过以下方式建议用户的费率：

从2年到9年，利率为0.75%

从10%到11%为0.90%

12比14是1%

15比19是1.1%

20比24是1.3%

25比29为1.65%

30是2.18%

但我也希望他们在不影响年数的情况下写出利率。到目前为止，我已经做到了：

贷款期限


比率%

如果您想在每次更改贷款期限字段时更新“利率”字段，那么下面介绍如何进行更新

var ratesValue=document.querySelector（“#rates”）；
document.querySelector（“#dureInputId”）.onchange=function（）{
如果（this.value>=2&&this.value=10&&this.value=12&&this.value=15&&this.value=20&&this.value=25&&this.value欢迎使用Stackoverflow！请阅读此指南（）并提供更多带有“您已经尝试过的内容”等的代码示例。请扩展您的问题。您到底想要什么？抱歉，我刚刚编辑了我的帖子，我无法首先发布到目前为止的代码。我已经看到了它，所以您使用的是
React
或
vue
还是其他什么？这部分代码，是静态HTML吗？还是动态组件的一部分？那么你只是想让滑块更新另一个字段吗？它实际上是表单的一部分，是静态html。表单中有以前的字段。但实际上，在这一个字段中，我希望滑块控制贷款的期限，并根据期限，建议利率，正如我在问题中解释的那样。
    <div class="loans-simulator">
  <label for="duration">Loan duration</label>
  <input type="range" name="dureeInputName" id="dureeInputId" value="2" min="2" max="30" oninput="dureeOutputId.value = dureeInputId.value" onchange="updateTextInput(this.value);">
  <input name="dureeOutputName" id="dureeOutputId" value="0"><br/>
  <label for="rates">Rate %</label>
  <input id="rates" value="0.0" step=".01" min="0.0">
</div>