sum insured 100000 – 499999 can buy hc not over 2000
sum insured 500000 – 749999 can buy hc not over 2500
sum insured 750000 – 999999 can buy hc not over 3000
sum insured 1000000 – 2999999 can buy hc not over 4000
sum insured 3000000+ can buy hc not over5000

value slider A
for 2 value , 1 is sum insured ,2 is hc

create value slider A : for 2 value , 1 is sum insured ,2 is hc sum insured 100000 – 499999 can buy hc not over 2000 sum insured 500000 – 749999 can buy hc not over 2500 sum insured 750000 – 999999 can buy hc not over 3000 sum insured 1000000 – 2999999 can buy hc not over 4000 sum insured 3000000+ can buy hc not over5000 and display value while scroll

<label for="sum-insured">Sum Insured:</label>
<input type="range" id="sum-insured" name="sum-insured" min="100000" max="5000000" step="100000" value="100000">
<span id="sum-insured-value"></span>
<br><br>

<label for="hc">Health Coverage (HC):</label>
<input type="range" id="hc" name="hc" min="0" max="5000" step="100" value="0" disabled>
<span id="hc-value"></span>
<br><br>

<script>
  const sumInsuredSlider = document.getElementById("sum-insured");
  const hcSlider = document.getElementById("hc");

  const sumInsuredValue = document.getElementById("sum-insured-value");
  const hcValue = document.getElementById("hc-value");

  // Add event listener to sum insured slider
  sumInsuredSlider.addEventListener("input", function() {
    const sumInsured = sumInsuredSlider.value;
    let maxHC = 0;

    if (sumInsured >= 100000 && sumInsured < 500000) {
      maxHC = 2000;
    } else if (sumInsured >= 500000 && sumInsured < 750000) {
      maxHC = 2500;
    } else if (sumInsured >= 750000 && sumInsured < 1000000) {
      maxHC = 3000;
    } else if (sumInsured >= 1000000 && sumInsured < 3000000) {
      maxHC = 4000;
    } else {
      maxHC = 5000;
    }

    hcSlider.max = maxHC;
    hcSlider.disabled = false;

    // Update sum insured value display
    sumInsuredValue.textContent = sumInsured.toLocaleString('en-US', {
      style: 'currency',
      currency: 'USD',
      minimumFractionDigits: 0,
      maximumFractionDigits: 0
    });
  });

  // Add event listener to hc slider
  hcSlider.addEventListener("input", function() {
    const hc = hcSlider.value;

    // Update hc value display
    hcValue.textContent = hc.toLocaleString('en-US', {
      style: 'currency',
      currency: 'USD',
      minimumFractionDigits: 0,
      maximumFractionDigits: 0
    });
  });

  // Show initial values on page load
  sumInsuredValue.textContent = sumInsuredSlider.value.toLocaleString('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 0,
    maximumFractionDigits: 0
  });
  hcValue.textContent = hcSlider.value.toLocaleString('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 0,
    maximumFractionDigits: 0
  });
</script>