<div class="applicationForm" >
  <div class="container applicationForm__container">
    <form action="#" class="applicationForm__form">
      <p class="applicationForm__text applicationForm__text_sum" id="totalSum"></p>
      <!-- choose type of a tank  -->
      <fieldset class="applicationForm__radioFieldSet"  >
        <legend class="applicationForm__text">Выберите тип танков</legend>

        <!-- 1 -->
        <label>
          <input type="radio" name="typeTankFarm" required />
          <span>Легкие танки </span>
        </label>

        <!-- 2 -->
        <label >
          <input type="radio" name="typeTankFarm" required />
          <span>Тяжелые танки </span>
        </label>

        <label>
          <input type="radio" name="typeTankFarm" required />
          <span>Средние танки </span>
        </label>

        <label>
          <input type="radio" name="typeTankFarm" value="20" required />
          <span>Пт сау </span>
        </label>

        <label>
          <input type="radio" name="typeTankFarm" required />
          <span>Сау </span>
        </label>
      </fieldset>

      <!-- slider with quantity silver  -->
      <fieldset class="formSlider">
        <legend class="applicationForm__text">Выберите количество опыта</legend>
        <input
          class="formSlider__range"
          type="range"
          min="1"
          max="100"
          step="1"
          id="sliderRange"
          
        />

        <input class="formSlider__input" type="number" id="totalQuantity" readonly/>
      </fieldset>

      <!-- yes/no reserve -->
      <fieldset class="applicationForm__radioFieldSet applicationForm__radioFieldSet_small">
        <!-- 1 -->
        <label>
          <input type="radio" name="reserve" value="50" required />
          <span>Нет резервов на аккаунте</span>
        </label>

        <!-- 2 -->
        <label>
          <input type="radio" name="reserve" required />
          <span>Есть резервы на аккаунте</span>
        </label>
      </fieldset>

  



 

  
    </form>
  </div>
</div>

const totalInput = document.getElementById("totalQuantity");
const totalSum = document.getElementById("totalSum");

let tickCoef = 5000;
let pricePerStep = 100;
let totalSumPerTick;

window.addEventListener("DOMContentLoaded", () => {
  let range1 = new rSlider({
    element: "#sliderRange",
    tick: 1,
    totalSum: "#totalSum",
  });

  let formCount = new FormCount({
    form: ".applicationForm",
    buttons: "input",
  });
});
class rSlider {
  constructor(args) {
    this.el = document.querySelector(args.element);
    this.totalSum = document.querySelector(args.totalSum);
    this.min = +this.el.min || 0;
    this.max = +this.el.max || 100;
    this.step = +this.el.step || 1;
    this.tick = args.tick || this.step;
    this.addTicks();
    this.dataRange = document.createElement("div");
    this.dataRange.className = "data-range";
    this.el.parentElement.appendChild(this.dataRange, this.el);
    totalSumPerTick = this.step * pricePerStep;
    this.updatePos();

    this.el.addEventListener("input", () => {
      this.updatePos();
      this.totalSum.innerText = totalSumPerTick + " рублей";
    });

    this.totalSum.innerText = totalSumPerTick + " рублей";
  }
  addTicks() {
    let wrap = document.createElement("div");
    wrap.className = "range";
    this.el.parentElement.insertBefore(wrap, this.el);
    wrap.appendChild(this.el);
    let ticks = document.createElement("div");
    ticks.className = "range-ticks";
    wrap.appendChild(ticks);
    for (let t = this.min; t <= this.max; t += this.tick) {
      let tick = document.createElement("span");
      tick.className = "range-tick";
      ticks.appendChild(tick);
      let tickText = document.createElement("span");
      tickText.className = "range-tick-text";
      tick.appendChild(tickText);
    }
  }
  getRangePercent() {
    let max = this.el.max,
      min = this.el.min,
      relativeValue = this.el.value - min,
      ticks = max - min,
      percent = relativeValue / ticks;
    return percent;
  }
  updatePos() {
    let percent = this.getRangePercent(),
      left = percent * 100,
      emAdjust = percent * 3;
    this.dataRange.style.left = `calc(${left}% - ${emAdjust}em)`;

    totalInput.value = this.el.value * tickCoef;

    totalSumPerTick = this.el.value * 100;
  }
}

// totalSum
class FormCount {
  constructor(props) {
    this.buttons = document.querySelectorAll(props.buttons);
    this.form = document.querySelector(props.form);

    for (let index = 0; index < this.buttons.length; index++) {
      if (!this.buttons[index].hasAttribute("value")) {
        this.buttons[index].setAttribute("value", 0);
      }

      this.buttons[index].addEventListener("change", () => {
        totalSum.value = Number(totalSum.innerText.match(/[0-9/.]+/g));

        if (event.currentTarget.checked) {
          totalSum.value = totalSumPerTick + Number(this.buttons[index].value);
          totalSum.innerText = totalSum.value + " рублей";
        }
      });
    }
  }
}