how to update value in slider when i change values ​​in input?

[deantek]

gif issue:

component: ` const MyComponent = () => { const [value, setValue] = useState(1000000)

const min = 0
const max = 5000000

const handleChange = (e) => {
    let val = Math.max(min, Math.min(max, Number(e.target.value)))
    setValue(val)
}

return ( <>

          <input
            type="number"
            value={value}
            onChange={handleChange}
            onKeyUp={(e) => {
              let str = e.target.value
              str = str.replace(/\b0+/g, '')
              setValue(str)
            }}
          />
      
          <Slider
            min={min}
            max={max}
            step={10000}
            className={s.slider}
            onChange={(val) => setValue(val)}
            defaultValue={1000000}
          />
        </div>
      </>

) } `

I do not understand how to update the slider slider when the input changes, help pls

[slobodanpecha23]

Try inserting the prop value in the Slider component.

  <Slider
    min={min}
    max={max}
    step={10000}
    className={s.slider}
    onChange={(val) => setValue(val)}
    defaultValue={1000000}
    value={value}
  />

[CaliforniaLuv]

In order to determine the input range according to the input value, You need to assign a state value to a specific value.

like this

 const [value, setValue] = useState(100000) 

const handleChange = (e) => {
    let val = Math.max(min, Math.min(max, Number(e.target.value)))
    setValue(val)
}

return (
    <>
        <input
            type="number"
            value={value}
            onChange={handleChange}
            onKeyUp={(e) => {
              let str = e.target.value
              str = str.replace(/\b0+/g, '')
              setValue(str)
            }}
         />

          <Slider
            min={min}
            max={max}
            step={10000}
            className={s.slider}
            onChange={(val) => setValue(val)}
            defaultValue={1000000}
            value={value} //  👈👈👈 put it here state
          />
    </>

)