Как создать калькулятор ценообразования JQUERY или Vanilla JS Advanced Range Slider? ⇐ Html

[Anonymous]

Я пытался создать демонстрацию расширенного калькулятора ценообразования для веб -сайта моего клиента. < /p>
Вот что мне действительно нужно; < /p>
i 'будет иметь 3 разных ценовых и стоимости changer; < /p>

• Сотрудник < /li>
  Офисный номер < /li>
  Преимущества

Как вы можете видеть на изображении, эти 3 смены цен/значения будут изменять 4 различных значения справа, зависит от шансов на левую сторону.
Когда значения выше или выбрали какие -либо преимущества; Фон «с озо» будет заполнен как % 3, но фон «без озо» будет заполнен как 13 % (я использую: перед элементом для наполнения фона). Кроме того, цены обоих блоков будут увеличены, но «без озо» будет увеличиваться на 15 на 15 больше, чем «с озо». С другой стороны, когда число людей каждые 15 добавят 1 балл «Человек/финансовые работники» и 1,5 часа к «часам, проведенным в месяц». Вы предлагаете? " Теги каждый увеличит только часть «без озо», добавив %10 еще к текущей цене. Получите рассчитываемо. /> Вот что я сделал до сих пор; < /p>

Код: Выделить всё

const costRanges = document.querySelectorAll('.cost_item input');

function handleUpdate() {
const suffix = this.dataset.sizing || '' ;
var rangeType = this.value+suffix;
document.documentElement.style.setProperty(`--${this.name}` , rangeType );
}

costRanges.forEach(input => {
input.addEventListener('change' , handleUpdate);
});
costRanges.forEach(input => {
input.addEventListener('mousemove' , handleUpdate);
});

(function() {
const rangeEmployee = document.querySelector('input[type="range"]#employee');
const rangeCountry = document.querySelector('input[type="range"]#country');

const rangeEmployeeValue = function(){
const newValue = rangeEmployee.value;
const target = document.querySelector('.wOzoValue');
target.innerHTML = newValue;
}

const rangeCountryValue = function(){
const newValue = rangeCountry.value;
const target = document.querySelector('.woOzoValue');
target.innerHTML = newValue;
}

rangeEmployee.addEventListener("input", rangeEmployeeValue);
rangeCountry.addEventListener("input", rangeCountryValue);

})();

Подробнее здесь: https://stackoverflow.com/questions/794 ... -calculato