function styleSlider(slider){
const val=(slider.value - slider.min) / (slider.max - slider.min);
const percentage=val * 100;
slider.style.background=`linear-gradient(to right, #029b62 ${percentage}%, #ccc ${percentage}%)`;
}
const rate=document.getElementById("rate");
const rateVal=document.getElementById("rateVal");
const years=document.getElementById("years");
const timeVal=document.getElementById("timeVal");
const withdrawal=document.getElementById("withdrawal");
const withdrawlVal=document.getElementById("withdrawlVal");
rate.addEventListener("input", ()=> {
rateVal.value=rate.value;
styleSlider(rate);
updateRateSlider(rate.value);
swpFixedCashFLowCalc();
});
rateVal.addEventListener("input", ()=> {
rate.value=rateVal.value;
styleSlider(rate);
updateRateSlider(rate.value);
swpFixedCashFLowCalc();
});
years.addEventListener("input", ()=> {
timeVal.value=years.value;
styleSlider(years);
updateTimeSlider(years.value);
swpFixedCashFLowCalc();
});
timeVal.addEventListener("input", ()=> {
years.value=timeVal.value;
styleSlider(years);
updateTimeSlider(years.value);
swpFixedCashFLowCalc();
});
withdrawal.addEventListener("input", ()=> {
withdrawlVal.value=withdrawal.value;
styleSlider(withdrawal);
updateWithdrawalSlider(withdrawal.value);
swpFixedCashFLowCalc();
});
withdrawlVal.addEventListener("input", ()=> {
withdrawal.value=withdrawlVal.value;
styleSlider(withdrawal);
updateWithdrawalSlider(withdrawlVal.value);
swpFixedCashFLowCalc();
});
styleSlider(rate);
styleSlider(document.getElementById("rate"));
styleSlider(years);
styleSlider(document.getElementById("years"));
styleSlider(withdrawal);
styleSlider(document.getElementById("withdrawal"));