<style TYPE="text/css"> .value_container { display: flex; align-items: center; justify-content: space-between; } .label, .value_container { font-family: Poppins; font-style: normal; font-size: 14px; line-height: 21px; color: #000000; font-weight: normal; } .label { margin: 5px 0; } .large_label { color: #3d8f01; font-weight: bold; } .green_value { color: #3d8f01; } h2.label { font-size: 22px; line-height: 33px; } .inner_container { border-bottom: 1px solid #E5E5E5; padding-bottom: 8px; } .yellow_container { background: #FFD400; WIDTH: 256px; height: 21px; padding-left: 8px; border-radius: 10px 0 0 10px; font-weight: bold; } .green_container { background: #3d8f01; color: #fff; height: 21px; flex-grow: 1; text-align: right; border-radius: 0 10px 10px 0; padding-right: 8px; font-weight: bold; } INPUT[TYPE=range] { WIDTH: 100%; margin: 4.5px 0; -webkit-appearance: none; } INPUT[TYPE=range]:focus { outline: none; } INPUT[TYPE=range]::-webkit-slider-runnable-track { border: 0; border-radius: 7px; WIDTH: 100%; height: 6px; cursor: pointer; } INPUT[TYPE=range]::-webkit-slider-thumb { margin-top: -4.5px; WIDTH: 16px; height: 16px; background: #ffffff; border: 2px solid #3d8f01; border-radius: 15px; cursor: pointer; -webkit-appearance: none; } INPUT[TYPE=range]::-moz-range-track { border: 0; border-radius: 7px; WIDTH: 100%; height: 7px; cursor: pointer; -moz-appearance: none; background: none; } INPUT[TYPE=range]::-moz-range-thumb { WIDTH: 10px; height: 10px; background: #ffffff; border: 2px solid #3d8f01; border-radius: 15px; cursor: pointer; -moz-appearance: none; } INPUT[TYPE=range]::-ms-track { background: transparent; border-color: transparent; border-WIDTH: 4.5px 0; color: transparent; WIDTH: 100%; height: 7px; cursor: pointer; } INPUT[TYPE=range]::-ms-fill-lower { border: 0; border-radius: 14px; } INPUT[TYPE=range]::-ms-fill-upper { border: 0; border-radius: 14px; } INPUT[TYPE=range]::-ms-thumb { WIDTH: 16px; height: 16px; background: #ffffff; border: 2px solid #3d8f01; border-radius: 15px; cursor: pointer; margin-top: 0px; /*Needed TO keep the Edge thumb centred*/ } INPUT[TYPE=range]:focus::-ms-fill-lower { background: rgba(61, 143, 1, 0.78); } INPUT[TYPE=range]:focus::-ms-fill-upper { background: #48a801; } /*TODO: Use one of the selectors from https://stackoverflow.COM/a/20541859/7077589 AND figure OUT how TO remove the virtical space around the range INPUT in IE*/ /*@supports (-ms-ime-align:auto) { /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.COM/a/32202953/7077589 */ INPUT[TYPE=range] { margin: 0; /*Edge starts the margin from the thumb, NOT the track AS other browsers DO*/ } #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" 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 slider.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>