<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Compensation Sliders</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .slider-container {
            margin-bottom: 20px;
        }
        .label {
            margin-bottom: 5px;
            font-weight: bold;
        }
        .value {
            margin-left: 10px;
        }
        #esop {
            pointer-events: none;
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <h1>Compensation Adjuster</h1>

    <div class="slider-container">
        <div class="label">Salary: <span id="salaryValue">35,000</span></div>
        <input type="range" id="salary" min="35000" max="55000" value="35000" step="1000">
    </div>

    <div class="slider-container">
        <div class="label">Signing Bonus: <span id="bonusValue">0</span></div>
        <input type="range" id="bonus" min="0" max="200000" value="0" step="1000">
    </div>

    <div class="slider-container">
      <div class="label">ESOP: <span id="esopValue">0.40</span>%</div>
      <input type="range" id="esop" min="0.20" max="0.40" value="0.40" step="0.001">
    </div>

    <script>
        const salarySlider = document.getElementById('salary');
        const esopSlider = document.getElementById('esop');
        const bonusSlider = document.getElementById('bonus');

        const salaryValue = document.getElementById('salaryValue');
        const esopValue = document.getElementById('esopValue');
        const bonusValue = document.getElementById('bonusValue');

        const updateSliders = () => {
            const salary = parseInt(salarySlider.value);
            const bonus = parseInt(bonusSlider.value);

            // Set ESOP to minimum when both salary and bonus are at maximum
            let esop = 0.40 - ((salary - 35000) / 20000) * 0.10 - (bonus / 200000) * 0.10;
            esop = Math.max(0.2, Math.min(0.40, esop)); // Clamp ESOP between 0.2 and 0.4
            esopSlider.value = esop.toFixed(3);

            salaryValue.textContent = salary.toLocaleString();
            esopValue.textContent = esopSlider.value;
            bonusValue.textContent = bonus.toLocaleString();
        };

        salarySlider.addEventListener('input', updateSliders);
        bonusSlider.addEventListener('input', updateSliders);
    </script>
</body>
</html>
