TransWikia.com

Range input controls two different fields

Stack Overflow Asked by mscmdaddcts on December 16, 2021

I’m new to coding and I have to build a mortgage simulator. For that I have a range field where users can choose the number of years which are shown on a first field. And another field where there’s the rates. Is there a way the range control the rates too. I want to suggest the rates for the users this way :

  1. From 2 to 9 years the rates is 0.75%
  2. from 10 to 11 it’s 0.90%
  3. 12 to 14 it’s 1%
  4. 15 to 19 it’s 1.1%
  5. 20 to 24 it’s 1.3%
  6. 25 to 29 it’s 1.65%
  7. 30 is 2.18%

But I also would want them to write their rates, without affecting the number of years. I have come to this so far:

https://jsfiddle.net/f3sy8dh5/

    <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>
htmljavascript

One Answer

If you want to update the rates field on each change of the loan duration field, then here is how to do that

var ratesValue = document.querySelector("#rates");
document.querySelector("#dureeInputId").onchange = function() {
  if(this.value >= 2 && this.value <= 9) {
    ratesValue.value = 0.75;
  }else if(this.value >= 10 && this.value <= 11) {
    ratesValue.value = 0.9;
  }else if(this.value >= 12 && this.value <= 14) {
    ratesValue.value = 1;
  }else if(this.value >= 15 && this.value <= 19) {
    ratesValue.value = 1.1;
  }else if(this.value >= 20 && this.value <= 24) {
    ratesValue.value = 1.3;
  }else if(this.value >= 25 && this.value <= 29) {
    ratesValue.value = 1.65;
  }else {
    ratesValue.value = 2.18;
  }
};
<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="2"><br/>
  <label for="rates">Rate %</label>
  <input id="rates" value="0.75" step=".01" min="0.0">
</div>

Answered by SaymoinSam on December 16, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP