JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<link rel="stylesheet" href="http://rlexpert.ru/templates/real/css/style.css">
<div id="st_list1" class="st_calc">
    <p class="st_head">Калькулятор стоимости</p>
    <p class="st_sub_head_red">Консультация - бесплатно!</p>
    <img class="st_close"  src="http://rlexpert.ru/templates/real/images/close_icon.png" alt="" />
    <div class="st_top_block sttlb">
        <img id="stch1" class="checked" data-checked="false" src="http://rlexpert.ru/templates/real/images/squre_check.png" alt="Акт осмотра"/>
        <p>Акт осмотра</p>
        <img src="http://rlexpert.ru/templates/real/images/quest_icon.png" alt="Акт осмотра" title="Акт осмотра – документ составляется при осмотре ТС в присутствии  всех заинтересованных лиц. В акте перечисляются все повреждения  автомобиля, а также его комплектация и основные параметры. Автомобиль для осмотра экспертом предоставляется в чистом виде."/>
    </div>
    <div id="skd1" class="st_top_block disabled">
        <img id="stch2" class="checked" data-checked="false" src="http://rlexpert.ru/templates/real/images/squre_check.png" alt=""/>
        <p>Выезд</p>
        <img src="http://rlexpert.ru/templates/real/images/quest_icon.png" alt="" title="Доступно при включении Акта осмотра в заказ"/>
    </div>
    <div class="st_top_block sttlb">
        <img id="stch3" class="checked" data-checked="false" src="http://rlexpert.ru/templates/real/images/squre_check.png" alt=""/>
        <p class="stk1">Составление калькуляции</p>
        <img title="Калькуляция – определение стоимости услуг материалов и запасных частей для восстановления поврежденного ТС. Калькуляция не является Отчетом об оценке, и следовательно, документом доказательного значения. На калькуляцию не распространяются требования Закона №135-ФЗ «Об оценочной деятельности»." src="http://rlexpert.ru/templates/real/images/quest_icon.png" alt=""/>
    </div>
    <div class="st_top_block">
        <img id="stch4" class="checked"...

CSS

.st_calc {
    padding:20px 40px 35px 40px;
    min-height: 415px;
    width: 380px;
    background: #FAFAFA;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    position:relative;
}
.st_head {
    text-align: center;
    font-size: 23px;
}
.st_sub_head_red {
    color: #F00;
    text-align: center;
    margin-bottom:20px;
}
.st_sub_head {
    text-align: center;
    margin-bottom:10px;
    margin-top: 15px;
}
.st_top_block {
    display:inline-block;
    width:165px;
}
.st_top_block p {
    max-width:120px;
    min-height: 35px;
    display:inline-block;
    margin:0 5px;
}
.st_bottom_block p {
    max-width: 165px;
    min-height: 35px;
    display: inline-block;
    margin: 0 0px 0 5px;
    font-size: 13px;
}
.st_bottom_block img, .st_top_block img{
    vertical-align:top;
    margin-top:3px;
    cursor:pointer;
}
.sttlb {
    margin-right:45px;
}
.stk1 {
    width: 82px;
}
.stk2 {
    position: relative;
    right: 35px;
}
.stk3 { 
    width: 115px;
}
.stk4 {
    position:absolute;
}
#st_slider {
    background: url("http://rlexpert.ru/templates/real/images/sliderv2.png") 0px 0px no-repeat;
    height: 8px;
    width: 300px;
    margin: 0 auto;
    border-color:none;
    margin-bottom:30px;
}
.ui-slider-range.ui-widget-header.ui-slider-range-max {
background: rgba(0, 0, 0, 0);
}
.ui-slider-handle.ui-state-default.ui-corner-all {
    background: url("http://rlexpert.ru/templates/real/images/slider_arrow.png") 0px -3px no-repeat !important;
    border: 0px;
    cursor:pointer;
    outline:none
}
.st_slider_description {
    position: absolute;
    font-size: 12px;
}
#st_slider_description_holder {
    position:relative;
    height:15px;
    margin-bottom:17px;
}
#st_slider_description_1 {
    left: 24px;
}
#st_slider_description_2 {
    left: 116px;
}
#st_slider_description_3 {
    right: 115px;
}
#st_slider_description_4 {
    right: 12px;
}
.slider_description_pointer {
    border-left:1px solid gray;
    height:7px;
  ...

JavaScript

$(".st_calc").tooltip();

var slide_val = 1;

$("#st_slider").slider({
      range: "max",
      min: 1,
      max: 4,
      value: 1,
      slide: function( event, ui ) {
        slide_val = ui.value;
        re_count();
      }
});

$("#stch1").click(function() {
    $("#stch2").data("checked",false).attr("src","http://rlexpert.ru/templates/real/images/squre_check.png");
    re_count();
    $("#skd1").toggleClass("disabled");
});

$(".st_next_list").click(function () {
    $("#st_list1").hide("fade",500);
    setTimeout(function() {$("#st_list2").show("fade",500);},500);
});


$(".checked").click(function () {
    if ($(this).parent().hasClass("disabled") == false) {
        if($(this).data("checked") == true) {
           $(this).data("checked",false);
           $(this).attr("src","http://rlexpert.ru/templates/real/images/squre_check.png");
        }
        else {
            $(this).data("checked",true); 
            $(this).attr("src","http://rlexpert.ru/templates/real/images/squre_check_active.png");
        }
        re_count();
    }
});
function re_count() {
    var price = 0;
    price += counting("#stch1",1000,1000,1000,1000);
    price += counting("#stch2",1000,1000,1000,1000);
    price += counting("#stch3",1200,1200,1200,1200);
    price += counting("#stch4",2000,2500,3000,3500);
    price += counting("#stch5",2000,2250,2500,2700);
    price += counting("#stch6",2000,2000,2000,2000);
    price += counting("#stch7",1600,1600,1600,1600)
    $("#st_price").text(price);
}
function counting(selector,val1,val2,val3,val4) {
    if ($(selector).data("checked") == true) {
        if (slide_val == 1) {
            return val1;
        }
        if (slide_val == 2) {
            return val2;
        }
        if (slide_val == 3) {
            return val3;
        }
        if (slide_val == 4) {
            return val4;
        }
    }
    else {
        return 0;
    }
}