Kashub's Code Barn - "tak"

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

| Katalog Sklepów internetowych | | Sklep z artykułami dla dzieci | | Opony całoroczne | | Opony motocyklowe | | Kamery IP sklep | | Dyskretny sexshop internetowy | | Skróć link | | Skracacz linków | | Opisy GG |