var p = {
        0: "10 Mb/s",
        1: "11 Mb/s",
        2: "12 Mb/s",
        3: "13 Mb/s",
        4: "14 Mb/s",
        5: "15 Mb/s",
        6: "16 Mb/s",
        7: "17 Mb/s",
        8: "18 Mb/s",
        9: "19 Mb/s",
        10: "20 Mb/s",
        11: "21 Mb/s",
        12: "22 Mb/s",
        13: "23 Mb/s",
        14: "24 Mb/s",
        15: "25 Mb/s",
        16: "26 Mb/s",
        17: "27 Mb/s",
        18: "28 Mb/s",
        19: "29 Mb/s",
        20: "30 Mb/s",
    };

    var t = {
        0: "44.9",
        1: "46.9",
        2: "48.9",
        3: "50.9",
        4: "52.9",
        5: "54.9",
        6: "56.9",
        7: "58.9",
        8: "60.9",
        9: "62.9",
        10: "64.9",
        11: "66.9",
        12: "68.9",
        13: "70.9",
        14: "72.9",
        15: "74.9",
        16: "76.9",
        17: "78.9",
        18: "80.9",
        19: "82.9",
        20: "84.9",
    };

    var pd = {
        0: "1 Mb/s",
        1: "2 Mb/s",
        2: "3 Mb/s",
        3: "4 Mb/s",
        4: "5 Mb/s",
        5: "6 Mb/s",
        6: "7 Mb/s",
        7: "8 Mb/s",
        8: "9 Mb/s",
        9: "10 Mb/s",
    };


    var td = {
        0: "4.0",
        1: "8.0",
        2: "12.0",
        3: "16.0",
        4: "20.0",
        5: "24.0",
        6: "28.0",
        7: "32.0",
        8: "36.0",
        9: "40.0",
    };


    $(document).ready(function () {

        $("#slider_amirol").slider({
            range: "min",
            animate: true,
            min: 0,
            max: 20,
            step: 1,
            slide: function (event, ui) {
                update($(event.target), ui.value, p);
                calcualtePrice($("#total_end"), t, ui.value);
            }
        });

        update($('#slider_amirol'), 0, p);
        calcualtePrice($("#total_end"), t);
    });

    $(document).ready(function () {

        $("#slider_amirol_down").slider({
            range: "min",
            animate: true,
            min: 0,
            max: 9,
            step: 1,
            slide: function (event, ui) {
                update($(event.target), ui.value, pd);
                calcualtePrice($("#total_end"), td, ui.value);
            }
        });

        update($('#slider_amirol_down'), 0, pd);
        calcualtePrice($("#total_end", td));
    });


    function update(slider, val = 0, speedArray) {

        var amount = speedArray[val];
        const a = slider.find('a');
        a.html('<label><span class="glyphicon glyphicon-chevron-left"></span> ' + amount + ' <span class="glyphicon glyphicon-chevron-right"></span></label>');
    }

    function calcualtePrice(output, speedArray, val = 0) {

        var totalPrice = t[val] * 1;
        var downPrivce = td[val] * 1;
        var totalPricev2 = (totalPrice);

        $("#total").val(totalPrice.toFixed(2) + " PLN");
        output.val(totalPricev2.toFixed(2) + " PLN");