HTML range slider operation

Question

I'm trying to make a loan calculator by making two range slider interact with one another then show a the monthly payments in a label, these are the two requirements:

• Only show 5 values on the "Month" range slider: 12,18,24,30,36 months (solved by Alexander Solonik)
• Calculate an interest of 75%. (solved myself)

ok the code has evolved this way,:

  <!--first range slider: money needed to borrow-->
  <script language="JavaScript">
    function showpay() {
        var princ = document.calc.loan.value;
        var term  = document.calc.months.value;
        var intr   = (75 / 1200)*1.16; /*must include taxes, depending on your country, in my case is 16%*/

        var auxterm = 0;
        switch(term){
            case '1': auxterm = 12; break;
            case '2': auxterm = 18; break;
            case '3': auxterm = 24; break;
            case '4': auxterm = 30; break;
            case '5': auxterm = 36; break;
        }
        document.calc.pay.value = Math.round((princ * 1000) * intr / (1 - (Math.pow(1/(1 + intr), auxterm))));
      // payment = principle * monthly interest/(1 - (1/(1+MonthlyInterest)*Months))
    }
  </script>

  <center>
    <form name=calc method=POST>
      <table width=60% border=0>
        
          <h1>¿How much money do you need?</h1>
          <p>Borrow from $2,000 to $80,000</p><br>

          <div>
            <input name="loan" type="range" min="2" max="80" value="2" class="slider" id="myRange" style="color: black;">
            <p><br><strong>$ <span id="demo"></span>,000</strong></p>
          </div>
          <script>
            var slider = document.getElementById("myRange");
            var output = document.getElementById("demo");
            output.innerHTML = slider.value;
            slider.oninput = function() { output.innerHTML = this.value; }
          </script>
        

        
          <h1>In how many months would you like to pay?</h1>
          <p>from 12 to 36 months.</p><br>
          <div>
            <input name="months" type="range" min="1" max="5" value="0" class="slider" id="input" style="color: black;">
            <strong><p><span id="result"></span> months</p></strong>
          </div>
          <script>
            var result = document.getElementById('result'), input = document.getElementById('input')

            var arr = [12,18,24,30,36]

            input.oninput = function() { result.innerHTML = arr[this.value - 1] }
            input.oninput()
          </script>
        

        <!--<tr>
          <p>$ <span oninput="showpay()" value=Calculate></span></p>
        </tr>-->
        
        
          <tr>
            Monthly Payment
            <input type=text name=pay size=10>
          </tr>

          <input type=button onClick='showpay()' value=Calculate><!-- oninput="showpay()"-->
      </table>
    </form>
  </center>

It is basicly complete, however the interest calculation is wrong, on the month slider it takes the values: 1,2,3,4,5 as that is the value of the slider, i need it to take the value of the arr = [12,18,24,30,36] instead, any idea how to do this?

ok this is now solved, may this be of help to some school projet or an actual loan calculator. :)

Answer 1

For only specific values o be selected in the range slider you can do something like this

var result = document.getElementById('result'),
input = document.getElementById('input')

var arr = [12,18,24,30,36]

input.oninput = function() {
   result.innerHTML = arr[this.value - 1]
}

input.oninput()

<input type="range" min="1" max="5" id="input" value="0">

<div id="result">
  
</div>