<!-- first range -->
<section>
  <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>
</section>
<!-- second range -->
<section>
  <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>
</section>
section {
  width: 50%;
  float: left;
}
View Compiled
let sumText = document.getElementById("sum_text");
let sum = document.getElementById("sum");
sum.addEventListener("input", function () {
    sumText.innerText = this.value;
});

document.getElementById("button").addEventListener("click", function (e) {
    e.preventDefault();
    localStorage.setItem("sum", sum.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.