<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 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 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 doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.