如何在更改输入值时自动调整滑块？ (Rc-滑块)

Question

我使用 rc-slider 包创建了一个范围计算器，一切正常，当我移动滑块的边界时，目标输入内的值发生变化，但问题是: 当我从输入更改值时，滑块保持不变并且不使用输出中给定的值自行调整..有帮助吗？

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

我想要的只是当我更改输入的值时滑块自行调整

Answer 1

将 Range 组件中的 Value 属性更改为 value。根据 rc-slider DOCS

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

如何在更改输入值时自动调整滑块？ (Rc-滑块)

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

slider

reactjs

react-hooks

rc-slider

use-state