Расчет числа исходя из положения ползунка
 

Доброго времени суток, делаю простую программу по расчету числа, исходя из значения value ползунка.

Возникла проблема, число считается не верно, и когда ползунок стоит в начальном положении (value = 0), итоговая сумма !=0, более того, если ползунок двигать несколько раз, итоговая сумма постоянно разная.

Однозначно я начудил в коде, но не могу пофиксить, подскажите что нужно сделать, чтобы расчет был верным.

Спасибо.

<div class="inps">
    <label for="power">
      <p>Мощность</p>
        <input type="text" id="power" class="inp power" oninput="changeInp()">
    </label>
    <label for="cost">
        <p>Стоимость</p>
        <input type="text" id="cost" class="inp cost" oninput="changeRange(), changeInp()">
    </label>
  </div>

  <input id='range' class='range' type="range" min="0" max="9999" step="100" value="0" oninput="changeRange()">

function changeRange() {
  var range = document.getElementById('range');
  var power = document.getElementById('power');
  var cost = document.getElementById('cost');
  var sum = 0;

  sum = power.value * 3.30;
  

  power.value = range.value;
  cost.value = (sum).toFixed(2);
}

function changeInp() {
  var range = document.getElementById('range');
  var power = document.getElementById('power');
  var cost = document.getElementById('cost');
  var sum = 0;

  sum = power.value * 3.30;
  range.value = power.value;
  cost.value = (sum).toFixed(2);

}

Решил проблему, был изначально неверный алгоритм действий, нужно было вычислять не от значения power а от значения range

То есть заменить (sum = power.value * 3.30) на (sum = range.value * 3.30)

Возникает еще вопрос, как эту программу написать более корректно (грамотно)?, чтобы не стыдно было показать.

TheSanches,
зачем две одинаковые функции?

Первая функция вычисляет и выводит число которое берет с value ползунка
Вторая делает тоже, но берет число с value инпута

Дело в том что при вводе числа в инпут, ползунок тоже меняет свое положение на заданное и инпуте количество шагов (step= число заданное в инпуте).

Вероятно все эти действия можно прописать в одной функции?

вероятно можно, если знать что вам нужно.

Как-то так?

<div class="inps">
    <label for="power"><p>Мощность</p></label>
    <input type="number" id="power" class="inp power" min="0" max="10000" step="100" value="0">
    <input id='range' class='range' type="range" min="0" max="10000" step="100" value="0" >

    <label for="cost"><p>Стоимость</p></label>
    <input type="text" id="cost" class="inp cost" >
</div>

<script>
var range = document.getElementById('range'),
     power = document.getElementById('power'),
     cost = document.getElementById('cost'),
     sum = 0;
     
document.querySelector("div.inps").addEventListener("input", function(e) {
   console.log(e.target.id);
   if (e.target.id == "range") power.value = range.value;
   if (e.target.id == "power") range.value = power.value;
   
   sum = power.value * 3.30;
    cost.value = (sum).toFixed(2);
});
</script>

Спасибо, как раз то что искал