<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> ₴</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>
</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> ₴</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 ₴</p>
<p>20 000 ₴</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] {
appearance: none;
width: 100%;
background: transparent;
height: 20px;
}
input[type='range']::slider-thumb {
appearance: none;
height: 25px;
width: 25px;
border-radius: 25px;
border: 6px solid #66b41f;
background-color: #fff;
cursor: pointer;
margin-top: -7px;
}
input[type=range]::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";
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.