Estoy tratando de implementar 2 controles deslizantes donde el valor del segundo control deslizante no puede ser inferior al valor del primer control deslizante, pero el valor del segundo control deslizante parece quedarse atascado en alrededor de 9.xx cuando el primer control deslizante se mueve más allá de este punto para recortar videos. Los 2 controles deslizantes se muestran en VidTrim.js. En general, funciona bien, pero no puedo entender por qué ocurre este error, especialmente alrededor del mismo valor de manera tan consistente. Cualquier ayuda sería apreciada.

ejemplo jsviolín

VidTrim.js

 function VidTrim() { const useState = React.useState; let end_slider_start = 0; const [start_val, set_start_val] = useState(0); const [end_val, set_end_val] = useState(0); function onSlideChangeStart(event) { console.log(event.target.value); set_start_val(event.target.value); check_end_val(end_val); console.log("start: ", start_val); console.log("end: ", end_val); } function onSlideChangeEnd(event) { check_end_val(event.target.value); } function check_end_val(val) { if (val < start_val) { set_end_val(start_val); } } return ( <div className="VidTrim"> <div> <div id="Sliders"> <Slider value={start_val} title={"Start Trim"} changeSlide={onSlideChangeStart}></Slider> <Slider value={end_val} min={start_val} disabled={false} title={"End Trim"} changeSlide={onSlideChangeEnd}></Slider> </div> </div> </div>);}

Función Sliders.js Control deslizante (accesorios) {

 function onChange(event) { this.props.changeSlide(event); } return ( <div className="Slider" style={{textAlign: 'center'}}> <h1 className='sliderTitle'>{props.title}</h1> <p >{props.value} seconds</p> <input value={props.value} step="0.01" min={0} max={100} type="range" onInput={props.changeSlide} style={{width: "100%"}} ></input> </div>);}