<div style="width:25%; float:left;margin-right:5%;border: 1px solid #888;padding:50px;">
<div class="calc_form">
  <form id="heroForm">
    <div class="flex_row form_el credit_count">
      <span style="color:#040404;">Сумма займа</span>
      <div>
        <span id="sum_text">3000</span><span> &#8372;</span>
      </div>
    </div>
    <div class="form_el">
      <input type="range" id="sum" min="500" max="20000" step="500" value="3000">
    </div>
    <div class="flex_row form_el min_max">
      <p>500 &#8372;</p>
      <p>20 000 &#8372;</p>
    </div>
    <div class="form_el flex_row">
      <button type="button" id="button" class="btn btn-submit">Получить деньги</button>
    </div>
  </form>
</div>
<div class="calc_info">
  <p><b>Возвращайте от <span id="sum_span">3000</span> ₴ до 3169 ₴</b><br>с учетом всех комиссий и переплат.*</p>
</div>
</div>

<div style="width:25%; float:left;border: 1px solid #888;padding:50px;">
<div class="calc_form">
  <form id="heroForm">
    <div class="flex_row form_el credit_count">
      <span style="color:#040404;">Сумма займа</span>
      <div>
        <span id="summ_text">3000</span><span> &#8372;</span>
      </div>
    </div>
    <div class="form_el">
      <input type="range" id="summ" min="500" max="20000" step="500" value="3000">
    </div>
    <div class="flex_row form_el min_max">
      <p>500 &#8372;</p>
      <p>20 000 &#8372;</p>
    </div>
    <div class="form_el flex_row">
      <button type="button" id="button" class="btn btn-submit">Получить деньги</button>
    </div>
  </form>
</div>
<div class="calc_info">
  <p><b>Возвращайте от <span id="summ_span">3000</span> ₴ до 3169 ₴</b><br>с учетом всех комиссий и переплат.*</p>
</div>
</div>
.calc_form {
       form {
            .form_el {
                display: flex;
                justify-content: space-between;
            }
            .credit_count {
                font-weight: 700;
                margin-bottom: 10px;
                text-transform: uppercase;
            }
            .min_max {
                font-size: 12px;
                color: rgba(149,156,170,.7);
                margin-bottom: 40px;
            }
        }
        label {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        input {
            width: 100%;
        }
        input[type=range] {
            -webkit-appearance: none;
            width: 100%;
            background: transparent;
            height: 20px;
        }
        input[type='range']::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 25px;
            width: 25px;
            border-radius: 25px;
            border: 6px solid #66b41f;
            background-color: #fff;
            cursor: pointer;
            margin-top: -7px;
        }
        input[type=range]::-webkit-slider-runnable-track {
            width: 100%;
            height: 10px;
            cursor: pointer;
            background: rgba(149,156,170,.2);
            border-radius: 5px;
        }
        input:focus {
            outline: none;
        }
    }
    .calc_info {
        font-size: 12px;
        line-height: 20px;
        color: #959caa;
        margin-top: 30px;
        span {
            color: #959caa;
        }
    }
View Compiled
let sumText = document.getElementById("sum_text");
let sumSpan = document.getElementById("sum_span");
let sum = document.getElementById("sum");
let summText = document.getElementById("summ_text");
let summSpan = document.getElementById("summ_span");
let summ = document.getElementById("summ");
sum.addEventListener("input", function () {
    sumText.innerText = this.value;
    sumSpan.innerText = this.value;
});
summ.addEventListener("input", function () {
    summText.innerText = this.value;
    summSpan.innerText = this.value;
});

document.getElementById("button").addEventListener("click", function (e) {
    e.preventDefault();
    localStorage.setItem("sum", sum.value);
    location.href = "form.php";
});
document.getElementById("button2").addEventListener("click", function (e) {
    e.preventDefault();
    localStorage.setItem("summ", summ.value);
    location.href = "form.php";
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.