Change one value depending on range number selected

I have a slider that has a number of employees

<input id="myRange" type="range" min="50" max="50000" value="50" class="slider no_emp" >

I store the range selected in id demo

<span id="demo" style="float: inline-end;color: #00AFAB;">

Depending on the number of employees held in demo I want to change cost_by_employee_count

for example if demo between 500 to 1000 employees then cost_by_employee_count is set to **3290000 **

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}

<section <?php theme_section_attr_id() ?>
  <?php theme_section_attr_class( 'pb-5' ) ?>>
  <div class="container">
    <div class="row pt-5">
      <div class="col-md-8 showdow">
        <div class="row p-5 pb-0">
          <div class="pb-5">
            <p class="m-0 p-0"><strong>Number of Employees <span id="demo" style="float: inline-end;color: #00AFAB;"></span></strong></p>
            <div class="slidecontainer">
              <input id="myRange" type="range" min="50" max="50000" value="50" class="slider no_emp">
            </div>
            <p class="m-0 p-0">50 <span style="float: inline-end;">50,000</span></p>
          </div>
</section>

Ideally I would like a Array where if the employee count falls in between a range of numbers then set cost_by_employee_count to the value depending on the range.

the array would be like:

<option value="3310000">0 - 499</option>
<option value="3290000">500 - 1000-</option>
<option value="4870000">1001 - 5000</option>
<option value="4330000">5001 - 10000</option>
<option value="5460000">10001 - 25000</option>
<option value="5420000">25001 - 100000</option>

Can someone point me in the right direction or give me a working example please.

Solution

Create an option array ranges, call the function updateCostByEmployeeCount whenever the user changes the value of the slider, and inside the the function updateCostByEmployeeCount check for the condition value >= ranges[i].min && value <= ranges[i].max and if it matches assign the respective cost to variable cost_by_employee_count via cost_by_employee_count = ranges[i].cost

Refer the below code:

var slider = document.getElementById("myRange");
  var output = document.getElementById("demo");
  output.innerHTML = slider.value;

  var cost_by_employee_count = 0;

  var ranges = [
    {min: 50, max: 499, cost: 1000000},
    {min: 500, max: 1000, cost: 3290000},
    {min: 1001, max: 5000, cost: 7000000},
    {min: 5001, max: 10000, cost: 15000000},
    {min: 10001, max: 50000, cost: 30000000}
  ];

  function updateCostByEmployeeCount(value) {
    for (var i = 0; i < ranges.length; i++) {
      if (value >= ranges[i].min && value <= ranges[i].max) {
        cost_by_employee_count = ranges[i].cost;
        break;
      }
    }
    console.log('Cost of the employee count:' +cost_by_employee_count);
  }

  slider.oninput = function() {
    output.innerHTML = this.value;
    updateCostByEmployeeCount(this.value);
  }

.slider {
      width: 100%;
}
    
.console-log {
      width: 100%;
      word-wrap: break-word;
      white-space: pre-wrap;
      background-color: #f4f4f4;
      padding: 10px;
      border: 1px solid #ddd;
      margin-top: 10px;
      font-family: monospace;
}

<html>
<head>
</head>
<body>

<section>
  <div class="container">
    <div class="row pt-5">
      <div class="col-md-8 showdow">
        <div class="row p-5 pb-0">
          <div class="pb-5">
            <p class="m-0 p-0">
              <strong>Number of Employees <span id="demo" style="float: inline-end;color: #00AFAB;"></span></strong>
            </p>
            <div class="slidecontainer">
              <input id="myRange" type="range" min="50" max="50000" value="50" class="slider no_emp">
            </div>
            <p class="m-0 p-0">50 <span style="float: inline-end;">50,000</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>



</body>
</html>