MUI slider running with min and max value with
const minVal = 8; const maxVal = 255;
<Slider
value={range}
min={minVal}
max={maxVal}
onChange={handleSliderChange}
valueLabelDisplay="auto"
/>
At the same time, show input field the result in percentage for both Min Percentage and Max Percentage.
There is function on both input fields which is change range position by entering percentage in the input fields which is not working as expecting.
<TextField
label="Min Percentage"
value={minInput}
onChange={handleMinInputChange}
variant="outlined"
/>
<TextField
label="Max Percentage"
value={maxInput}
onChange={handleMaxInputChange}
variant="outlined"
/>
When typing value, it is not effecting, which is the issue with current code.
Demo :
