React

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

function App() {
  return (
    <div id="app" className="App">
      <header className="App-header">
      <div>
        <VidTrim></VidTrim>
      </div>
      </header>

    </div>
  );

}


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





function Slider (props) {


    
    
    //this.disabled = props.disabled ?? false;

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

ReactDOM.render(<App />, document.getElementById('app'))