Javascript react ：输入滑块试图将第二个滑块的值限制在第一个滑块之上

我正在try 实现2个滑块，其中第二个滑块的值不能低于第一个滑块的值，但第二个滑块的值似乎卡在9.xx左右，当第一个滑块移动超过这个点的裁剪视频.这两个滑块显示在VidTrim.js中. 总体而言，它工作得很好，但我不明白为什么会发生这个错误，特别是在相同的值附近如此始终如一.任何帮助都将不胜感激.

example jsFiddle个

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>);}

Sliders.js 函数滑块(props ){

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>);}