<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>