Всем привет!

На днях реализовывал калькулятор ипотеки. Т.к. я верстаю на bootstrap, была основная задача - максимально воспользоваться компонентом без внедрения лишних скриптов.

 

В момем калькуляторе используется два поля, input (для ввода чисел вручную) и ползунок (input range) - для ввода путем перетаскивания ползунка по шкале.

Html5 + bootstrap позволяет реализовать все это дело без проблем, но примеров по созданию данной связки почти нет, все подключается через JS.

И так, создадим два поля ввода, input и inpup-range - согласно документации bootstrap 4 - это делается так:

<form>
  <div class="form-group">
    <label for="formControlRange">Ползунок для чисел</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
<div class="form-group">
    <label for="exampleInputEmail1">Числа</label>
    <input type="number" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Введите число">
  </div>
 </form>

В общем итоговый код выглядит так, довольно все просто. Данные связаны, бегунок работает:

<div class="input-group ">
<div class="input-group-prepend">
<span class="input-group-text" >Сумма кредита</span>
</div>
<input type="text" class="form-control" name="input_text1" id="input_text1" max="10000000" value="2500000" onchange="rangeinput1.value = input_text1.value" />
<input type="range" oninput="input_text1.value = rangeinput1.value" class="form-control-range slider" type="range" min="5000" max="10000000" value="2500000" id="rangeinput1" step="50000" onchange="input_text1.value = rangeinput1.value" ></div>

Пример, того как работает связка
Сумма кредита

Рассмотрим основыные понятия:

oninput="input_text1.value = rangeinput1.value" - позволяет при перемещении слайдера менять значения в инпуте на ходу.

onchange="rangeinput1.value = input_text1.value" - позволяет при вводе числа перемещать бегунок ползунка.

Все остальное вроде просто и понятно, спасибо за прочтение!