Как связать input(tel) с input(range)?

Question

[Лёля]

Добрый день!
Здесь уже есть подобный вопрос, но у меня немного другой калькулятор. Изначально заказчик хотел калькулятор с обычным отображением суммы (даты), а потом ему захотелось, чтобы можно было сделать ввод данных. При этом поле для ввода должно взаимодействовать не только с ползунком, но и с обычным текстом, в котором ведется счет суммы и даты.
Вот здесь можно посмотреть калькулятор:
https://jsbin.com/zozacip/edit?html,css,js,output
Подскажите, пожалуйста, что поменять в js, чтобы все работало?
p.s.: на input(tel) я здесь еще не изменила.

Comments

[Лёля]

Mesuti, привет из Заостровки! :)
Суть в том, что нужно все по дизайну сделать(( Просто вместо чисел где сумма займа и срок кредитования поле для ввода данных. Такое выполнимо?

[Лёля]

Mesuti, да, именно так

[golentor]

Чисто ради прикола удалите первую половину стилей в примере, оставив это

.p_3 {
  margin-left: 20px;
}
.p_4 {
  margin-right: 20px;
}
.p_5, .p_6 {
  font-family: "Arial";
}
.p_5 {
  font-size: 11px;
}
.p_6 {
  font-size: 13px;
}
.p_7, .p_8 {
  font-family: "Arial";
  font-size: 11px;
}
.p_7 {
  margin-left: 20px;
}
.p_8 {
  margin-right: 20px;
}
.p_9 {
  color: white;
  font-family: "Arial";
  font-size: 17px;
  margin-top: 8px;
}
.p_10 {
  font-size: 18px;
  color: #dfdfdf;
}
.p_11 {
  font-size: 18px;
  color: #dfdfdf;
}
input[type=submit] {
  background: red;
  color: white;
  box-shadow: 2px 2px #b0b0af;
  border-radius: 50px;
  border: none;
  width: 170px;
  height: 35px;
  font-size: 12pt;
  font-family: "Arial";
  font-weight: bold;
}

и зацените как работает)