JSFiddle - React, Tailwind, and code Playground

by Arsen

HTML

<div class="calc">
        <p class="text text-1">СУММА СБЕРЕЖЕНИЙ:</p>
        <div class="range-slider">
          <input type="number" id="sum" class="range-value" step="1000" min="5000" max="100000" value="50000"  onclick="calc()" />
        <div class="clr"></div>
        <input class="input-range" type="range" step="1000" min="5000" max="100000" value="50000"   onclick="calc()">
        </div>
        <div class="clr"></div>
        <p class="text text-2"><b>ВЫБЕРИТЕ СРОК РАЗМЕЩЕНИЯ:</b></p>
        
        <input type="radio" name="term" 
        id="m3" class="input-hid" onclick="calc()" />
      <label for="m3"><p>3 мес.</p></label>
        
        <input type="radio" name="term" 
        id="m6" class="input-hid" onclick="calc()"/>
      <label for="m6"><p>6 мес.</p></label>
        
        <input type="radio" name="term" 
        id="m12" class="input-hid" onclick="calc()" checked/>
      <label for="m12"><p>12 мес</p></label>
        
        <div class="clr"></div>
        
        <p class="text text-3"><b>ВЫБЕРИТЕ ПРОГРАММУ СБЕРЕЖЕНИЙ:</b></p>
        
        <input type="radio" name="prog" id="p1" class="input-hid" onclick="prc=0.1425;calc()" />
        <label for="p1">  <p>ПЕНСИОННЫЙ</p> </label>
        
        <input type="radio" name="prog" id="p2" class="input-hid" onclick="prc=0.15;calc()" />
        <label for="p2">  <p>ОПТИМАЛЬНЫЙ</p> </label>
        
        <input type="radio" name="prog" id="p3" class="input-hid" onclick="prc=0.175;calc()"  checked />
        <label for="p3">  <p>ИНВЕСТИЦИОННЫЙ</p> </label>
        
        <div class="clr"></div>
        
        <div class="roww">
          <p class="text top20">СТАВКА: </p>
          <p class="text-out"><span id="stavka">17%</span></p>
        </div>  
        <div class="roww">
          <p class="text top20">К ВЫПЛАТЕ: </p>
          <p class="text-out"><span id="plata">17 000 руб.</span></p>
        </div>
        
        <div style="clear:both"></div>
        
      </div>

CSS

.input-hid {
    position: absolute;
    left: -9999px;
  }
  
  input[type=radio]:checked + label>p {
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.4);
    background-color: #00b954;
  }
  
  input[type=radio] + label>p {
    padding: 26px 14px 20px 14px;
    margin: 5px;
    height: 28px;
    min-width: 36px;
    border: none;
    border-radius: 7px;
    background-color: #8f8f8f;
    font-size: 1em;
    text-align: center;
    color: rgb(255, 255, 255);
    cursor: pointer;
    outline: none;
    float: left;
    transition: 300ms all;
  }
  
  input[type=radio]:checked + label>p 
  {

      box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.4);
  
}
  
  
  .calc {
    width: 550px;
    margin: 40px auto;
    padding: 20px 20px 0px 20px;
    border: 2px solid #00b954;
    border-radius: 10px;
    font: 700 1em/1.38 'Open Sans';
  }
  
  input[type=number] {
    width: 390px;
    font-size: 18px;
    color: #8f8f8f;
    outline: none;
    border: 2px solid #eee;
    padding: 5px;
  }
  
  input[type=range] {
  -webkit-appearance: none;
  -webkit-appearance: none;
  width: 400px;
  height: 3px;
  background-color: #00b954;
  outline: none
  }
  
  input[type='range']::-webkit-slider-thumb {
   -webkit-appearance: none;
   background-color: #00b954;
   border: 2px solid #ffffff;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   cursor: pointer;
   box-shadow: 0 0 5px rgba(0,0,0,0.3);
  }
  
  .clr {
    height: 10px;
    clear: both;
    margin: 10px;
  }
  
  .text-out {
    font-size: 2em;
    color: rgb(0, 185, 84);
  }
  
  .roww{
    display: block;
    float: left;
    position: relative;
    width: 50%;
  }
  
  .top20 {
    position:relative;
    top:20px
  }

JavaScript

var range = $('.range-slider > .input-range'),
value = $('.range-slider > .range-value'),
prc = 0;
    
value.val(range.attr('value'));

range.on('input', function(){
  	//monparent=$(this).parent();
  monparent=this.parentNode;
 
  value=$(monparent).find('.range-value');
    $(value).val(this.value);
});

value.on('input', function(){
    monparent=this.parentNode;
  	range=$(monparent).find('.input-range');
    $(range).val(this.value);
 
});
//document.getElementById('stavka').innerHTML = "17.5%";

//document.getElementById('plata').innerHTML = "58750 руб.";

function penc(){
  document.getElementById('stavka').innerHTML = "14.25%";
  prc = 0.1425;
  calc();
}

function optima(){
  document.getElementById('stavka').innerHTML = "15%";
  prc = 0.15;
  calc();
}

function invest(){
  document.getElementById('stavka').innerHTML = "17.5%";
  prc = 0.175;
  calc();
}

function activ(mes){
  if (mes == 3) {$('#m3').attr("checked", true);}
  if (mes == 6) {$('#m6').attr("checked", true);}
  if (mes == 12) {$('#m12').attr("checked", true);}
}

function calc(){
  
  var summa = document.getElementById('sum').value;
  
  
  if($('#m3').prop('checked')) {
      mes=3; prc = 0.1425;
      $('#p2').attr("checked", false); 
      $('#p3').attr("checked", false);
      $('#p2').attr("disabled", true); 
      $('#p3').attr("disabled", true);
      $('#p1').attr("checked", true); 
                               }
  if($('#m6').prop('checked')) {
    mes=6;
    $('#p2').attr("disabled", false); 
    $('#p3').attr("disabled", false);
  }
  if($('#m12').prop('checked')) {
    mes=12;
    $('#p2').attr("disabled", false); 
    $('#p3').attr("disabled", false);                            
                                }
  
  if($('#p2').prop('checked') & $('#m3').prop('checked')) {
      mes=6; 
      $('#m3').attr("checked", false);
      $('#m6').attr("checked", true);
  }
  activ(mes);
  sum = Math.ceil (summa) + Math.ceil (summa*((prc/12)*mes));
  
  
 ...