How To Auto-Adjust Slider when Change Values in Input ? (Rc-Slider)

im using rc-slider package to creat a range calculator , everything is working fine , that when i move the slider's bound the value change inside the targeted input , BUT THE PROBLEM IS : When i change values from the input the slider stays the same and do not adjust it self with the values given in the output .. any help ?

    import React, { useState } from 'react'
    import Slider from 'rc-slider';
    import 'rc-slider/assets/index.css';
    const { Range } = Slider;
    const [lowerBound,SetlowerBound] = useState(0);
    const [upperBound,SetupperBound] = useState(20000);
    const [Value,SetValue] = useState([0,20000]);

    <input onChange={e=>SetlowerBound(Number(e.target.value))} value={lowerBound}/>

    <input onChange={e=>SetupperBound(Number(e.target.value))} value={upperBound}/>

    <Range allowCross={false}  min={0}  max={20000} defaultValue={[lowerBound, upperBound]}  
    Value={Value} step={100} pushable={true,500} onChange={val=>SetValue(val)}  }}/>  

All i want is that the slider adjust it self when i change values from the inputs

Solution 1:

Change the Value prop in Range component to value. As per rc-slider DOCS

<Range allowCross={false}  min={0}  max={20000} defaultValue={[lowerBound, upperBound]}  
    value={Value} step={100} pushable={true,500} onChange={val=>SetValue(val)}  }}/>