How to create Jquery or Vanilla JS advanced range slider based pricing calculator?

I’ve been trying to create an advanced pricing calculator showcase for my client’s website.

Here is what i actually need;

I’will have 3 different price and value changer;

  1. Employee
  2. Office Number
  3. Benefits

As you can see on the image, those 3 price/value changers will do change 4 different values on the right depends on the left side value chances.

When the values higher up or selected any benefits; The “with Ozo” background will be filled like %3 but the “without Ozo” background will be filled like 13% (I’m using :before element for the background filling). Also the prices of both blocks will be increase but the “without Ozo” will be increased %15 more than the “with Ozo”. On the other hand when the people number every 15 will add 1 point “HR/Finance employees involved” and 1.5 hour to “hours spent per month” sections.

For the “What benefits do you offer?” tags each will increase only the “without Ozo” part by adding %10 more to the current price.

I know i designed something crazy to complete for my design but now i’m unable to get calculated.

Advanced Price Calculator

Here is what i did so far;

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);

})();