function with many variables and with if statement doesn't work

Currently, I'm designing a web calculator and now have four elements input type number elements with value.

Also, I have the range with span(where the value is showed up)

After that, I set the function which is named sumUpNewCar. This function sums all type numbers and finally shows up in and the value in id="showPr" will be multiplied in this result

if(penetrationLoan > 24.99 && penetrationLoan < 35 ){ overallPromo *= 0.005;

var slider = document.getElementById("pr");
var output = document.getElementById("showPr");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value + "%";
}

function sumUpNewCar() {

  var promoLoan = document.getElementById("newAuto1").value;
  var standartLoan = document.getElementById("newAuto2").value;
  var promoPlusLoan = document.getElementById("newAuto3").value;
  var standartPlusLoan = document.getElementById("newAuto4").value;
  var penetrationLoan = document.getElementById("showPr"); /* doesn't work */




  var sumPromoLoans = document.getElementById("sumPromoLoans").innerHTML = (promoLoan * Number(0.004)) + (promoPlusLoan * Number(0.0004));
  var sumStandartLoans = document.getElementById("sumStandartLoans").innerHTML = (standartLoan * 0.07) + Math.round(standartPlusLoan * 0.028);
  var sumNewVehicle = document.getElementById("sumNewVehicle").innerHTML = sumPromoLoans + sumStandartLoans;
  var overallPromo = sumPromoLoans.value;

  /* doesnt work*/

  if (penetrationLoan > 24.99 && penetrationLoan < 35) {
    overallPromo *= 0.005;

  }


}

/*
else if(penetrationLoan >= 35){
    sumPromoLoans * Number(0.01);
    sumStandartLoans * Number(0.02);
}
else if(penetrationLoan >=25 <=29.99){
    sumStandartLoans * Number(0.01);
 }
 else if(penetrationLoan >=30 <=34.99){
    sumStandartLoans * Number(0.015);
 } else {
    sumNewVehicle * Number(1);
 }

}
*/

<div class="mainbox">
  <form>
    <input class="promo" type="number" min="1000" max="100000000" id="newAuto1" onchange="sumUpNewCar()">
    <input class="standart" type="number" min="100000" max="100000000" id="newAuto2" onchange="sumUpNewCar()">
    <input class="promoPlus" type="number" min="100000" max="100000000" id="newAuto3" onchange="sumUpNewCar()">
    <input class="standartPlus" type="number" min="100000" max="100000000" id="newAuto4" onchange="sumUpNewCar()">
  </form>
</div>
<div class="mainbox2">
  <div class="newvehicle2"><b>bonus</b></div>
  <input type="range" min="20" max="40" step="1" class="slider" value="20" id="pr">
  <div class="showPr"><span class="showPr2" id="showPr" onchange="sumUpNewCar()"> </span> </div>
  <div class="mainbox6">
    <div class="overall"></div>
    <table class="tableOverall">
      <tr>
        <td id="sumNewVehicle"></td>
        <td id="sumPromoLoans"></td>
        <td id="sumStandartLoans"></td>
      </tr>
     <tr>
        <td id="sumUsedVehicle"></td>
      </tr>
      <tr>
        <td id="sumSpr"></td>
      </tr>
      <tr>
        <td id="sumPrs"></td>
      </tr>
      <tr>
        <td id="sumUp"></td>
      </tr>
    </table>
  </div>