<!DOCTYPE html>
<html>
<head>
    <title>Калькулятор мощности кондиционера</title>
    <style>
        body {
            background-color: #333;
            color: black;
            font-family: Arial, sans-serif;
            font-size: 16px;
        }

        table {
            border-collapse: collapse;
            margin: 20px auto;
            width: 80%;
        }

        th {
            background-color: #0080ff;
            font-weight: normal;
            padding: 10px;
            text-align: left;
        }

        td {
            background-color: #f2f2f2;
            padding: 10px;
        }

        input[type=range] {
            width: 100%;
        }
    </style>
</head>
<body>
    <form action="/calculate" method="POST">
        
        <table>
        <tr>
            <th colspan="3" style="background-color: #0080ff; text-align: center; color: #f2f2f2;">Калькулятор мощности кондиционера</th>
        </tr>

        <tr>
            <td>Площадь помещения:</td>
            <td><input type="number" name="area" id="area_input" required></td>
            <td>(в м³)</td>
        </tr>
        
        <tr>
            <td></td>
            <td><input type="range" name="area_range" id="area_range" class="slider" min="0" max="100" value="50"></td>
            <td></td>
        </tr>
        
        
        <!--дописал-->
         <tr>
            <td>Высота А, м:</td>
            <td><input type="number" name="visota_potolka" id="visota_potolka_input" required></td>
            <td>(в м³)</td>
        </tr>
        
        <tr>
            <td></td>
            <td><input type="range" name="visota_potolka_range" id="visota_potolka_range" class="slider" min="0" max="3.2" value="2"></td>
            <td></td>
        </tr>
        <!--дописал-->









        
        
        
        
        
        
        
        <tr>
            <td>Удельная тепловая нагрузка:</td>
            <td>
                <select name="heat_load" id="heat_load" required>
                    <option value="low">Низкая</option>
                    <option value="medium">Средняя</option>
                    <option value="high">Высокая</option>
            </td>
            <td></td>
        </tr>
        
        <!--дописал вниз-->
        <tr>
            <td>Количество людей:</td>
            <td>
                <select name="kolvo_people" id="kolvo_people" required>
                    <option value="one_1">1</option>
                    <option value="two_1">2</option>
                    <option value="tree_1">3</option>
                    <option value="fo_1">4</option>
                    <option value="five_1">5</option>
            </td>
            <td></td>
        </tr>
        <!--дописал вверх-->
        
        <!--дописал вниз-->
        <tr>
            <td>Количество компьютеров:</td>
            <td>
                <select name="kolvo_pc" id="kolvo_pc" required>
                    <option value="one_2">1</option>
                    <option value="two_2">2</option>
                    <option value="tree_2">3</option>
                    <option value="fo_2">4</option>
                    <option value="five_2">5</option>
            </td>
            <td></td>
        </tr>
        <!--дописал вверх-->
        
        <!--дописал вниз-->
        <tr>
            <td>Количество телевизоров:</td>
            <td>
                <select name="kolvo_pc" id="kolvo_pc" required>
                    <option value="one_2">1</option>
                    <option value="two_2">2</option>
                    <option value="tree_2">3</option>
                    <option value="fo_2">4</option>
                    <option value="five_2">5</option>
            </td>
            <td></td>
        </tr>
        <!--дописал вверх--> 
        
        <!--дописал вниз-->
        <tr>
            <td>Мощность другой бытовой техники, кВт:</td>
            <td>
                <select name="kolvo_drygoy" id="kolvo_drygoy" required>
                    <option value="one_3">1</option>
                    <option value="two_3">2</option>
                    <option value="tree_3">3</option>

            </td>
            <td></td>
        </tr>
        <!--дописал вверх-->        
        
        
        
        
        <tr>
            <td>Мощность кондиционера (охлаждения) Q:</td>
            

            <td>{% if power %} {{ power }} {% else %} 0 {% endif %}</td>
            <td>Вт</td>
        </tr>
        </table>
        <button style="background-color: #0080ff; color: white; padding: 10px 20px; border: none; border-radius: 5px;" type="submit">Рассчитать</button>
    </form>




    <script>
        var areaInput = document.getElementById("area_input");
        var areaRange = document.getElementById("area_range");
        
        
        var visota_potolkaInput = document.getElementById("visota_potolka_input");
        var visota_potolkaRange = document.getElementById("visota_potolka_range");



        

        areaInput.addEventListener("input", function() {
            areaRange.value = this.value;
        });

        areaRange.addEventListener("input", function() {
            areaInput.value = this.value;
        });
        
        
        
        
        visota_potolkaInput.addEventListener("input", function() {
            visota_potolkaRange.value = this.value;
        });

        visota_potolkaRange.addEventListener("input", function() {
            visota_potolkaInput.value = this.value;
        });        
        
     
        
        
        
        
        
        
        
        
        
        
    </script>
</body>
</html>

исправь код чтобы шаг у visota_potolka был 0.1
visota_potolka_range