Калькулятор расчёта стоимости

Question

Есть два ползунка, Количество звонков и средняя продолжительность звонка. Есть итоговая стоимость звонка. Значения ползунков находятся в input value. Базовая стоимость 200. Суть такова, если значение первого ползунка больше 3х то к цене прибавляется допустим + 150, также если значение второго ползунка тоже больше 3х то к стоимости прибавляется допустим + 130. Итого если у обоих ползунков значение >=3 200+130+150 = 480. И если значение выше 7 то к этой цифре ещё добавляется допустим + 200. Значение value их input я уже получил, но как обработать такой функционал и передать его в input value общей стоимости - я не знаю. Подскажите с реализацией, пожалуйста. (Ползунок noUiSlider, подгрузить его не получилось сюда, поэтому value для input прописал вручную).

Answer 1

С вашей библиотекой.

const startPrice = 200;
const firstInputStep = new Array( ['>=3', 150], ['>=7', 350] );
const secondInputStep = new Array( ['>=3', 200], ['>=7', 400] );

let firstSlider;
let secondSlider;
const price = document.getElementById('price');

init();
addListeners();
calculatePrice();

function init () {
  firstSlider = noUiSlider.create(document.getElementById('first-slider'), {
    start: [2],
    connect: true,
    tooltips: [true],
    step: 1,
    range: {
        'min': 0,
        'max': 50
    }
  });
  secondSlider = noUiSlider.create(document.getElementById('second-slider'), {
    start: [2],
    connect: true,
    tooltips: [true],
    step: 1,
    range: {
        'min': 0,
        'max': 50
    }
  });
}

function addListeners () {
  firstSlider.on('slide', calculatePrice);
  secondSlider.on('slide', calculatePrice);
}

function calculatePrice () {
  let firstValue = firstSlider.get();
  let secondValue = secondSlider.get();
  let finallyPrice = (typeof startPrice === 'number') ? startPrice : 0;
  finallyPrice += getStepByValue(firstInputStep, firstValue);
  finallyPrice += getStepByValue(secondInputStep, secondValue);
  price.innerText = `price: ${finallyPrice}`;
}

function getStepByValue (stepsMap, val) {
  let stepPrice = 0;
  val = Number.parseInt(val);
  if (typeof val === 'number') {
      for (let item of stepsMap) {
          if (eval(`${val}${item[0]}`)) {
              stepPrice = item[1];
          }
      }
  }
  return stepPrice;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.5.0/nouislider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.5.0/nouislider.min.css" rel="stylesheet">
<div style="padding: 15px">
  <p>Slider 1:</p>
  <div id="first-slider"></div>
  <p>Slider 2:</p>
  <div id="second-slider"></div>
  <p>Price: </p>
  <div id="price"></div>
</div>

БЛОГ НА HUSL

Калькулятор расчёта стоимости

Ответы (1 шт):