Slider that changes values based on its value

Question

I would like to slider display values based on the value of the slider.

There are 5 values that are changing, 3 of the values change every time the slider value changes. And 2 of the values change on last two values.

Values for slider are 12,24,36,48

JSFiddle

I think it's important to mention that I have zero knowledge with JavaScript and what I've tried to achieve is not possible with what I've tried.

var slider = document.getElementById("myRange");
var ptag = document.getElementById("ptagi");
var static1 = document.getElementById("static1");
var static2 = document.getElementById("static2");
var static3 = document.getElementById("static3");
var slid = document.getElementById("slid");
var eka = document.getElementById("eka");
var toka = document.getElementById("toka");
var kolmas = document.getElementById("kolmas");
var neljas = document.getElementById("neljas");
slid.innerHTML = slider.value;
eka.innerHTML = static1.value/slider.value;
toka.innerHTML = slider.value*2*static1.value;
kolmas.innerHTML = slider.value*3*static1.value;
neljas.innerHTML = slider.value*4*static1.value;
ptag.innerHTML = slider.value*static1.value;


slider.oninput = function() {
ptag.innerHTML = this.value*static1.value;
slid.innerHTML = this.value;
eka.innerHTML = static1.value/slider.value;
toka.innerHTML = this.value*2*static1.value;
kolmas.innerHTML = this.value*3*static1.value;
neljas.innerHTML = this.value*4*static1.value;
}

.slidecontainer {
  width: 100%;
  border: solid;
  border-width: 1px;
}

.slidecontainer td {
  border: solid;
  border-width: 1px;
}

#ptagi  {
  display: inline;
}

#eka  {
  display: inline;
}

#toka  {
  display: inline;
}

#kolmas  {
  display: inline;
}

#neljas  {
  display: inline;
}

#slid  {
  display: inline;
}

#static1  {
  display: inline;
}

#static2  {
  display: inline;
}

#static3  {
  display: inline;
}

#myRange {
  width: 100%;
}

<div>
  <div>
    <h3>Takaisinmaksuaika: <p id="slid"></p> kuukautta</h3>
  </div>
  <input type="range" min="12" max="48" value="12" step="12" class="slider" id="myRange">
  <table class="slidecontainer">
    <tr>
      <td>Normaali kuukausierä</td>
      <td><p id="eka"></p></td>
      <td>Luottosumma</td>
      <td><input type="number" id="static1" value="1000" disabled="true"></td>
      <td>Vuosikorko</td>
      <td><p id="toka"></p></td>
      <td>Tilimaksu</td>
      <td><input type="number" id="static3" value="0" disabled="true"></td>
    </tr>
    <tr>
      <td>Käsittelymaksu</td>
      <td><input type="number" id="static2" value="3" disabled="true"></td>
      <td>Luoton kustannukset</td>
      <td><p id="kolmas"></p></td>
      <td>Todellinen vuosikorko</td>
      <td><p id="neljas"></p></td>
      <td>Maksettava kokonaismäärä</td>
      <td><p id="ptagi"></p> €</td>
    </tr>
  </table>
</div>