CodePen Embed - Pension

<div id="content">
    <h1>Så blir pensionen </h1>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2076398/kvinna.png" onerror=this.src="kvinna.png" alt="Sofia, 24">


    <p>Sofia, 20 år.</p>
    <p>Lön: 24&nbsp;000 kr/mån på heltid.</p>
    <br>
    <p>Att jobba deltid påverkar pensionen – dra i reglaget för att se vad som händer med Sofias pension vid olika deltidsprocent.</p>

    <!-- <input type="text" name="input" placeholder="Total pension per månad" id="inputlon" autocomplete="off"> -->

    <div id="slidecontainer">
      <form>
      <input type="range" min="20" max="100" step="5" value="100" class="slider" id="myRange" autocomplete="off" name="foo">

      <!-- To put output in bubble that follows slider -->
      <output for="foo" onforminput="value = foo.valueAsNumber;"></output>
    </form>


    </div>

    <div id="londiv" class="rutdiv"><span class="flyter"><label><input id="lon" type="text" size="5" readonly="readonly"/>Lön</label></span></div>

    <div id="pensiondiv" class="rutdiv"><span class="flyter"><label><input id="helpension" type="text" size="5" readonly="readonly"/>Pension</label></span></div>



    <div id="procentdiv" class="rutdiv"><span class="flyter"><label><input id="procent" type="text" size="3" readonly="readonly"/>Pensionens andel av lönen</label></span></div>


    <br>

    <button id="semer">Om uträkningen</button>
    <div id="forutsattningar">
      <div id="kommentar">
        <p>Beräkningen utgår från att Sofia jobbar samma deltid hela livet, och är anställd i kommun eller landsting. Medellönen för undersköterskor i kommuner och landsting var 24&nbsp;720 kr/mån år 2016.</p><p>I pensionen ingår premiepension, inkomstpension, garantipension och tjänstepension. </p><p>På <a href="http://www.minpension.se" target="blank">www.minpension.se</a> kan du göra en personlig pensionsprognos.</p>
      </div>

      <table>
        <th colspan="2">Förutsättningar</th>
        <tr>
          <td>Ålder</td>
          <td>20</td>
        </tr>
        <tr>
          <td>Avtal</td>
          <td>AKAP-KL</td>
        </tr>
        <tr>
          <td>Arbetat sedan</td>
          <td>20</td>
        </tr>
        <tr>
          <td>Uttagstid allmän pension</td>
          <td>Livsvarigt</td>
        </tr>
        <tr>
          <td>Uttagstid tjänstepension</td>
          <td>Livsvarigt</td>
        </tr>
        <tr>
          <td>Avkastning premiepension</td>
          <td>2,10%</td>
        </tr>
        <tr>
          <td>Avkastning tjänstepension</td>
          <td>2,10%</td>
        </tr>
        <tr>
          <td>Löneutveckling</td>
          <td>0,00%</td>
        </tr>
        <tr>
          <td>Prisnivå</td>
          <td>2018 års</td>
        </tr>
        <tr>
          <td>Pensionsålder</td>
          <td>67</td>
        </tr>
      </table>
      <p>Källa: Min Pension</p>
    </div>









  </div>

/*#content {
  width: 100%;
  max-width: 732px;
  background-color: #f5f7f7;
  height: 100px;
}*/

* {
  padding: 0px;
  margin: 0px;
}

body {
  font-family: sans-serif;
  position: relative;
  width: 732px;
  max-width: 100vw;
  width: 100%;
  max-width: 732px;
}

h1 {
  font-size: 1.5em;
}

#content {
  background-color: #C1F0F6;
  max-width: 100vw;
  padding: 10px;
}

div#content p {
  width: 70%;
}

img {
  height: 260px;
  width: auto;
  /* width: 104px;
  height: auto; */
  right: 10%;
  position: absolute;
  top: 5px;
  /* vertical-align: top; */
  /* float: left; */
  /* display: block; */
}

table {
  margin-top: 5px;
}

th {
  /* background-color: #65909A; */
  background-color: #53868B;
  color: white;
  text-align: left;
  padding: 3px;
}

td {
  font-size: 0.8em;
  padding: 3px 5px 3px 3px;
}

tr:nth-child(odd) {
  background-color: white;
}

div#forutsattningar p {
  font-size: 0.8em;
  margin-top: 5px;
  padding-left: 3px;
  font-style: italic;
}


div.rutdiv {
  width: 50px;
  display: inline-block;
  margin-right: 30px;
  vertical-align: top;
}

span.flyter {
  float: left;
  font-size: 0.9em;
  margin-right: 10px;
}

div.rutdiv {
  margin-right: 40px;
}

div.rutdiv input {
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 1.2em;
  padding: 1px;
}

div#kommentar p {
  width: 100%;
  font-size: 0.9em;
  width: 100%;
}

div#kommentar {
    margin: 15px 0px 15px 0px;
}


#forutsattningar {
  display: none;
}

#slidecontainer {
    width: 380px; /* Width of the outside container */
    max-width: 90%;
    margin-top: 40px;
    margin-bottom: 20px;
    margin-left: 5px;
    margin-right: 10px;
}

/* The slider itself */
.slider {
    -webkit-appearance: none;  /* Override default CSS styles*/
    margin-left: 0px;
    /*appearance: none;*/
    width: 100%; /* Full-width */
    height: 30px; /* Specified height */
    background: #FDFDFD;
    box-shadow: 2px 2px 5px;
    /*outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use webkit (Chrome, Opera, Safari, Edge) and moz (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    border-radius: 5px;
    background: #05B8CC; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #05B8CC; /* Green background */
    cursor: pointer; /* Cursor on hover */
}


/* Output result in bubble that follows Slider */
output {
  position: absolute;
  /* background-image: linear-gradient(#444444, #999999); */
  background-color: black;
  border-style: solid;
  border-color: white;
  border-width: 1px;
  width: 40px;
  height: 30px;
  text-align: center;
  color: white;
  border-radius: 10px;
  display: inline-block;
  font: bold 15px/30px Arial;
  bottom: 120%;
  left: 0;
}



form {
  position: relative;
  }

var slider = document.getElementById("myRange");
// var output = document.getElementById("demo");
var deltidslon = document.getElementById('lon');
var minlon = 24000;
var helpension = document.getElementById('helpension');
var procent = document.getElementById('procent');
var semerknapp = document.getElementById('semer');
var forutsattningar = document.getElementById('forutsattningar');
// output.innerHTML = slider.value + "%"; // Display the default slider value

var siffror = {
  100: {
    Premiepension: 1930,
    Inkomstpension: 8470,
    Garantipension: 1110,
    Tjänstepension: 2910
  },
  95: {
    Premiepension: 1840,
    Inkomstpension: 8040,
    Garantipension: 1330,
    Tjänstepension: 2770
  },
  90: {
    Premiepension: 1740,
    Inkomstpension: 7620,
    Garantipension: 1560,
    Tjänstepension: 2630
  },
  85:  {
    Premiepension: 1640,
    Inkomstpension: 7200,
    Garantipension: 1780,
    Tjänstepension: 2490
  },
  80:  {
    Premiepension: 1550,
    Inkomstpension: 6770,
    Garantipension: 2010,
    Tjänstepension: 2350
  },
  75:  {
    Premiepension: 1450,
    Inkomstpension: 6350,
    Garantipension: 2230,
    Tjänstepension: 2200
  },
  70: {
   Premiepension: 1350,
   Inkomstpension: 5930,
   Garantipension: 2460,
   Tjänstepension: 2060
 },
 65:  {
    Premiepension: 1260,
    Inkomstpension: 5500,
    Garantipension: 2680,
    Tjänstepension: 1920
  },
  60:  {
    Premiepension: 1160,
    Inkomstpension: 5080,
    Garantipension: 2900,
    Tjänstepension: 1780
  },
  55:  {
    Premiepension: 1060,
    Inkomstpension: 4660,
    Garantipension: 3130,
    Tjänstepension: 1640
  },
  50:   {
    Premiepension: 970,
    Inkomstpension: 4230,
    Garantipension: 3410,
    Tjänstepension: 1500
  },
  45: {
   Premiepension: 870,
   Inkomstpension: 3810,
   Garantipension: 3880,
   Tjänstepension: 1360
 },
 40: {
    Premiepension: 770,
    Inkomstpension: 3390,
    Garantipension: 4340,
    Tjänstepension: 1220
  },
  35: {
    Premiepension: 680,
    Inkomstpension: 2960,
    Garantipension: 4810,
    Tjänstepension: 1080
  },
  30: {
   Premiepension: 580,
   Inkomstpension: 2540,
   Garantipension: 5280,
   Tjänstepension: 940
 },
 25:  {
    Premiepension: 480,
    Inkomstpension: 2120,
    Garantipension: 5750,
    Tjänstepension: 800
  },

  20:  {
   Premiepension: 390,
   Inkomstpension: 1690,
   Garantipension: 6220,
   Tjänstepension: 660
 }

}

deltidslon.value = 24000;
helpension.value = siffror[100].Premiepension + siffror[100].Inkomstpension + siffror[100].Garantipension + siffror[100].Tjänstepension;
procent.value = Math.round((helpension.value/deltidslon.value)*100) + "%";



// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
    helpension.value = siffror[this.value].Premiepension + siffror[this.value].Inkomstpension + siffror[this.value].Garantipension + siffror[this.value].Tjänstepension;
    deltidslon.value = (24000 * this.value) / 100;
    procent.value = Math.round((helpension.value/deltidslon.value)*100) + "%";

}




// Function to present slider value in bubble that follows slider
// https://css-tricks.com/value-bubbles-for-range-inputs/ (Dave Olsens vanilla js adaptation)

function modifyOffset() {
    var el, newPoint, newPlace, offset, siblings, k;
    width    = this.offsetWidth;
    newPoint = (this.value - this.getAttribute("min")) / (this.getAttribute("max") - this.getAttribute("min"));
    // was originally -1, changed to -5 to push starting point to left
    offset   = -4;
    if (newPoint < 0) { newPlace = 0;  }
    else if (newPoint > 1) { newPlace = width; }
    else { newPlace = width * newPoint + offset; offset -= newPoint;}
    siblings = this.parentNode.childNodes;
    for (var i = 0; i < siblings.length; i++) {
        sibling = siblings[i];
        if (sibling.id == this.id) { k = true; }
        if ((k == true) && (sibling.nodeName == "OUTPUT")) {
            outputTag = sibling;
        }
    }
    outputTag.style.left       = newPlace + "px";
    outputTag.style.marginLeft = offset + "%";
    outputTag.innerHTML        = this.value + "%";
}

function modifyInputs() {

    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].getAttribute("type") == "range") {
            inputs[i].onchange = modifyOffset;

            // the following taken from http://stackoverflow.com/questions/2856513/trigger-onchange-event-manually
            if ("fireEvent" in inputs[i]) {
                inputs[i].fireEvent("onchange");
            } else {
                var evt = document.createEvent("HTMLEvents");
                evt.initEvent("change", false, true);
                inputs[i].dispatchEvent(evt);
            }
        }
    }
}

modifyInputs();

semer.addEventListener("click", function() {
  if (forutsattningar.style.display === "block") {
      forutsattningar.style.display = "none";
      semer.innerHTML = "Om uträkningen";
  }
  else {
    forutsattningar.style.display = "block";
    semer.innerHTML = "Dölj kommentaren";
  }

} )

This Pen is owned by LOM on CodePen.

See more by @LOM on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.