1

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

1 ответ 1

3

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

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>

5
  • Всё супер пока что, как сделать так чтобы инпут был type="hidden". Поскольку в него предаётся только значение и он скрыт, с type number всё работает, а вот с hidden к сожалению нет. Дело в том что в type number не передаётся значение value от nuUiSlider, а в hidden - передаётся. Подскажи как исправить. В целом реализация супер! Upd: я ещё вижу что значение с type number передаётся в value, но самого value в input нет, а число меняется, но число как будто призрачное, оно не считается.
    – chumakweb
    29 мая 2020 в 13:58
  • Более правильное решение - повесить обработчик на ваш слайдер. события вашей библиотеки. И в функции calculatePrice получать значения библиотеки. 29 мая 2020 в 14:20
  • На данный момент событие change передаёт значение из ползунка в input value. А уже с него по Вашему коду мы берём данные, как реализовать в коде уже прямой экспорт в калькулятор?
    – chumakweb
    29 мая 2020 в 14:27
  • Изменил ответ. Не нужно усложнять жизнь лишними input. 29 мая 2020 в 15:07
  • а как сделать так чтобы значения между собой перемножались? Допустим second = 2 , а first = 10, = 20. То есть значения между ними перемножались.
    – chumakweb
    31 мая 2020 в 14:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.