How to set max value for LinearProgress in material ui?

user_11866037 0
Viewed 754

I am using LinearProgress from material ui in my page and my max value for LinearProgress are not 100 all the time, sometimes it can be 10, 20, 5 .. . I tried doing

   <LinearProgress
            variant="determinate"
            value={section.Remaining_Qty}
            maxValue={50} // added             
    />

but it doesn't work. Are there any other ways to achieve it ?

material-ui reactjs
2 Answers

Use this formula in the value prop:

Math.round((100 / maxValue) * currentValue)
user_141924400

You could use formula to get dynamic value with maxValue={100} and dynamic maxValue that you have it (10,20,5...)

Final code


let dynamicMaxValue = 5;

<LinearProgress
  variant="determinate"
  value={(section.Remaining_Qty * 100)/dynamicMaxValue}
  maxValue={100}
/>

dynamicMaxValue = 5 and section.Remaining_Qty = 2 value will be = 40%

Remember section.Remaining_Qty <= dynamicMaxValue

user_115992870
Related