JSFiddle - React, Tailwind, and code Playground

by Julia

HTML

<h3>Расчет стоимости</h3>
            <div class="price-count">

                <div class="price__1">
                        <p>Количество компьютеров</p>
                                             
                        <div id="price__1__slider">
                            <p id="price__1__amount"></p>
                        </div>

                        <ul class="price__1__nums">
                            <li>&nbsp;</li>
                            <li>10</li>
                            <li>20</li>
                            <li>30</li>
                            <li>40</li>
                            <li>50</li>
                        </ul>
                </div>

                <div class="price__2">
                        <p>Количество серверов</p>
                                             
                        <div id="price__2__slider">
                           <p id="price__2__amount"></p>
                        </div>

                        <ul class="price__2__nums">
                            <li>&nbsp;</li>
                            <li>5</li>
                            <li>10</li>
                            <li>15</li>
                            <li>20</li>
                            <li>25</li>
                        </ul>
                 </div>

                    <div class="price-banks">
                        <div>
                            <p>Стоимость обслуживания</p>
                            <div id="bank__1">
                                <p id="bank__1__amount"></p>
                            </div>                            
                        </div>

                        <div>
                            <p>Штатный специалист</p>
                            <div id="bank__2">
                                <p id="bank__2__amount"></p>
                            </div>    
                        </div>

                     </div>

                    <div...

CSS

h3 {
    color: #000;
    padding-top: 50px;
}

.price-count {
    height: 500px;
    width: 500px;
}
    
.price-count p {
      font-size: 18px;
      color: #fff;
      text-align: left;
      margin: 20px;
}

.price__1 #price__1__slider , .price__2 #price__2__slider {
    height: 30px;
    width: 300px;
    border:1px solid;
}

.price__1 #price__1__amount, .price__2 #price__2__amount {
    border: 0;
    color: #fff;
    font-size: 20px;
    position: relative;
    z-index: 20;
    text-align: center;
    margin-top:0;
}

.price__1 .price__1__nums, .price__2 .price__2__nums  {
    display: flex;
    justify-content: space-between;
    width: 300px; 
    padding-left: 0;
}

.price__1 .price__1__nums li,.price__2 .price__2__nums li {
      color: #000;
      font-size: 18px;
      list-style: none;
}

.price__1 .ui-widget.ui-widget-content,
.price__1 .ui-corner-all, .price__1 .ui-corner-bottom,
.price__1 .ui-corner-right, .price__1 .ui-corner-br {
    border: none;
    border-radius: 0;
}

.price__1 .ui-slider-handle,.price__2 .ui-slider-handle  {
    display: none;
}

.price__1 .ui-slider-range {
    background: #a50000;
    cursor: pointer;
}

.price__2 .ui-widget.ui-widget-content,
.price__2 .ui-corner-all, 
.price__2 .ui-corner-bottom,
.price__2 .ui-corner-right,
.price__2 .ui-corner-br {
    border: none;
    border-radius: 0; 
}

.price__2 .ui-slider-range {
    background: #a50000;
    cursor: pointer;
    position: relative;
    z-index: 20; 
}

.price-banks{
    display: flex;
    justify-content: center;
}

.price-banks p {
    color: #fff; 
}

.price-banks #bank__2__amount {
    font-size: 24px;
    margin:0;
}

#bank__1, #bank__2 {
    width: 100px;
    height: 180px;
    margin: 0 auto;
    background: #a50000;
    border: none;
    pointer-events: none;
    border:1px solid;
}

#bank__1 #bank__1__amount, #bank__2 #bank__2__amount {
      border: 0;
      background: #a50000;
      font-size: 20px;
      position: relative;
      text-align:...

JavaScript

var $compPrice__lenin = 2000, $serverPrice__lenin = 1000;

            var $compPrice__other = 3500, $serverPrice__other = 3000;

            function update() {   

                $price__1 = $("#price__1__amount").text();
                $price__2 = $("#price__2__amount").text();

                $total__1 = $price__1 * $compPrice__lenin;
                $total__2 = $price__2 * $serverPrice__lenin;

                $other__1 = $price__1 * $compPrice__other;
                $other__2 = $price__2 * $serverPrice__other;

                $total = $total__1 + $total__2;
                $other = $other__1 + $other__2;

                $("#bank__1__amount").text($total);
                $("#bank__2__amount").text($other);
                $('#price-result').text($other - $total);
            }

        // update();

            $("#price__1__slider").slider({
                animate:true,
                range:'min',
                max:50,
                min:1,
                value:25,
                slide: function(event, ui) {  
                    $("#price__1__amount").text(ui.value);
                    $("#price__1__amount").text(ui.height);
                     update();
                }    
            });

            $("#price__2__slider").slider({
                animate:true,
                range:'min',
                max:25,
                min:1,
                value:5,
                slide: function(event, ui) {  
                    $("#price__2__amount").text(ui.value);
                    update();
                }   
            });

            $('.price__1 .ui-slider-range').append($( "#price__1__amount" ).html( $( "#price__1__slider" ).slider("value") ));

            $('.price__2 .ui-slider-range').append($( "#price__2__amount" ).html( $( "#price__2__slider" ).slider("value") ));

            $( "#bank__1" ).slider({
                orientation: "vertical",
                animate:true,
                range:'max',
               ...