Puede controlar los valores de input y slide por separado, eso será mucho más conveniente y se ajustará al control de state de React .

Ejemplo de fragmento de código

 const [min, setMin] = useState({ input: 0, slide: 0 }); const [max, setMax] = useState({ input: 100, slide: 100 }); const handleMaxChange = (e) => { const v = parseInt(e.target.value, 10); if (v) { if (v < min.input && !!min.input) { setMax({ input: min.input + 1, slide: min.slide + 1 }); } else if (v > extremeMax) { setMax({ input: extremeMax, slide: extremeMax }); } else { setMax({ input: v, slide: v }); } } else { setMax((prev) => ({ ...prev, input: "" })); } };

Ejemplo de código completo

no me queda claro lo que realmente quieres hacer. Porque digamos que el valor mínimo es 40, y el usuario borra el cuadro de texto con retrocesos: la primera vez, es 4, la segunda vez que presiona el retroceso, estará vacío. ¿Quieres que el control deslizante permanezca en 40 o 4?

en cualquier caso, puede mantener el valor del estado anterior de min/max y si el nuevo valor del cuadro de texto está vacío, no actualice el estado del control deslizante.

Simplemente puede configurar el control deslizante de esta manera:

 <MultiRangeSlider minVal={min ? min : 0} maxVal={max ? max : 0} ... />

Demostración en CodeSandbox .

Esta es una solución un poco avanzada, pero puede usar la eliminación de rebotes de lodash (o codificar su propia función de rebote, pero use paquetes en su lugar)

Lo que puede hacer es tener un rebote en la entrada del usuario para los controles deslizantes En el 'onChange' para su componente de entrada, rebote actualizando el valor del control deslizante en su estado, y verifique que si la entrada es nula / indefinida / vacía, entonces no actualices el estado :)

Estoy tomando un descanso en el trabajo, pero si necesitas que proporcione el código exacto, puedo hacerlo ^-^