<style type="text/css">
#aRange {
background: #E5E5E5;
border: 0;
border-radius: 8px;
height: 7px;
width: 356px;
outline: none;
transition: background 450ms ease-in;
-webkit-appearance: none;
}
</style>
<form style="max-width: 480px;">
<div class="slidecontainer inner_container">
<label for="aRange">
<h4 class="label small_label">Ile obecnie płacisz za prąd?</h4>
</label>
<div class="value_container">
<input type="range" min="100" max="1000" step="10" value="50" class="slider" id="aRange"
style="max-width: 260px">
<div id="sliderValue">100 zł</div>
</div>
</div>
<div class="inner_container">
<h3 class="label large_label">Jak to wygląda obecnie?</h3>
<div class="value_container">
<h4 class="label small_label">Rocznie wydajesz:</h4>
<div id="yearCost" class="green_value">1200 zł</div>
</div>
<div class="value_container">
<h4 class="label small_label">W ciągu roku zużywasz tyle energii:</h4>
<div id="yearExpend" class="green_value">2 MW</div>
</div>
</div>
<div class="inner_container">
<h3 class="label large_label">Jakiej instalacji potrzebujesz?</h3>
<div class="value_container">
<h4 class="label small_label">Zalecana moc:</h4>
<div id="instalationPower" class="green_value">2.44 kWp</div>
</div>
<div class="value_container">
<h4 class="label small_label">Koszt instalacji:</h4>
<div id="instalationCost" class="green_value">11468 zł</div>
</div>
<div class="value_container">
<h4 class="label small_label">Po odliczeniu dotacji i ulg:</h4>
<div id="summaryInstalationCost" class="green_value">6944 zł</div>
</div>
</div>
<div class="inner_container">
<h2 class="label large_label">OSZCZĘDNOŚĆ</h2>
<div class="value_container">
<h4 class="label small_label yellow_container">Zwrot instalacji w latach</h4>
<div id="returnTime" class="green_container">3.3</div>
</div>
<div class="value_container">
<h4 class="label small_label yellow_container">Twój zysk w ciągu 25 lat</h4>
<div id="save" class="green_container">57858 zł</div>
</div>
</div>
</form>
<script type="text/javascript">
const sliderElem = document.getElementById("aRange");
const sliderValueElem = document.getElementById("sliderValue");
const yearCostElem = document.getElementById("yearCost");
const yearExpendElem = document.getElementById("yearExpend");
const instalationPowerElem = document.getElementById("instalationPower");
const instalationCostElem = document.getElementById("instalationCost");
const summaryInstalationCostElem = document.getElementById("summaryInstalationCost");
const returnTimeElem = document.getElementById("returnTime");
const saveElem = document.getElementById("save");
// Update
sliderElem.oninput = function () {
const sliderValue = this.value;
const yearCost = sliderValue * 12;
const yearExpend = yearCost / 600;
const instalationPower = ((yearCost / 591.1) * 1.2).toFixed(2);
const instalationCost = (instalationPower * 4700).toFixed(0)
const summaryInstalationCost = (instalationCost - 3000 - ((instalationCost - 3000) * 0.18)).toFixed(0); //summaryInstalationCost
const returnTime = (((instalationPower * 4750) - 5000 - (0.18 * ((instalationPower * 4750) - 5000))) / (instalationPower * 598.1 * 1.12)).toFixed(1); //returnTime
const save = (instalationPower * 25 * 948.495).toFixed(0); //save
const value = (this.value - this.min) / (this.max - this.min) * 100;
sliderElem.innerHTML = `${sliderValue} zł`;
yearCostElem.innerHTML = `${yearCost} zł`;
yearExpendElem.innerHTML = `${yearExpend} MW`;
instalationPowerElem.innerHTML = `${instalationCost} kWp`;
instalationCostElem.innerHTML = `${instalationCost} zł`;
summaryInstalationCostElem.innerHTML = `${summaryInstalationCost} zł`;
returnTimeElem.innerHTML = returnTime;
save.innerHTML = `${save} zł`;
this.style.background = 'linear-gradient(to right, #3d8f01 0%, #3d8f01 ' + value + '%, #E5E5E5 ' + value + '%, #E5E5E5 100%)';
};
</script>