材质 UI 滑块 React JS

Question

我有三个 Material UI 滑块，显示了用户在其他 3 个文本字段中输入的值的百分比计算。我希望三个滑块的百分比总和为 100。目前在移动滑块值时，我也在文本字段中得到负值。我的要求是，即使一个人试图将滑块滑过它，也不应该移动，以便总数始终保持为 100，这样我就不会在文本字段中得到负值。此外，我一直在这个项目中使用 React Hooks。Image for reference Image for reference

代码参考-

我正在以下列方式计算文本字段值-

const b=(bPercentage*total)/100;
const c=(cPercentage*total)/100;
const a=(total-b-c);

And percentage values for sliders accordingly-
//percentages
const aPercentage= (a/total)*100||0;
const bPercentage= (b/total)*100||0;
const cPercentage = (c/total)*100||0;