<!-- 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> ₴</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 ₴</p>
<p>20 000 ₴</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> ₴</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 ₴</p>
<p>20 000 ₴</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";
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.