<div>
  <label for="ageSlider">Select Age: <span id="selectedAge">21</span> years old</label>
  <input type="range" id="ageSlider" min="0" max="65" value="21" oninput="updateCosts()">
</div>

<div>
  <label for="contributionSlider">Employer Contribution: <span id="employerContribution">50</span>%</label>
  <input type="range" id="contributionSlider" min="50" max="100" value="50" oninput="updateCosts()">
</div>

<div id="planCosts">
  <h3>Silver 3000</h3>
  <p>Total Cost: <span id="silverTotalCost"></span></p>
  <p>Employer Cost: <span id="silverEmployerCost"></span></p>
  <p>Employee Cost: <span id="silverEmployeeCost"></span></p>

  <h3>Gold 2000</h3>
  <p>Total Cost: <span id="gold2000TotalCost"></span></p>
  <p>Employer Cost: <span id="gold2000EmployerCost"></span></p>
  <p>Employee Cost: <span id="gold2000EmployeeCost"></span></p>

  <h3>Gold 1000</h3>
  <p>Total Cost: <span id="gold1000TotalCost"></span></p>
  <p>Employer Cost: <span id="gold1000EmployerCost"></span></p>
  <p>Employee Cost: <span id="gold1000EmployeeCost"></span></p>
</div>

<script>
  const rates = ${JSON.stringify(age_rate_map)};

  function updateCosts() {
    const age = document.getElementById('ageSlider').value;
    const contribution = document.getElementById('contributionSlider').value / 100;

    document.getElementById('selectedAge').textContent = age;
    document.getElementById('employerContribution').textContent = (contribution * 100).toFixed(0);

    // Update costs for each plan
    ['Silver 3000 Preferred Network', 'Gold 2000 Preferred Network', 'Gold 1000 Preferred Network'].forEach(plan => {
      const totalCost = rates[age][plan];
      const employerCost = totalCost * contribution;
      const employeeCost = totalCost - employerCost;

      document.getElementById(plan.toLowerCase().replace(/\s+/g, '') + 'TotalCost').textContent = `$${totalCost.toFixed(2)}`;
      document.getElementById(plan.toLowerCase().replace(/\s+/g, '') + 'EmployerCost').textContent = `$${employerCost.toFixed(2)}`;
      document.getElementById(plan.toLowerCase().replace(/\s+/g, '') + 'EmployeeCost').textContent = `$${employeeCost.toFixed(2)}`;
    });
  }

  // Initial update on page load
  document.addEventListener('DOMContentLoaded', updateCosts);
</script>