reactjs - 如何在 nouislider-react 中设置句柄？

Question

我无法设置 noUiSlider 的句柄。这就是我目前所拥有的。

const SearchOptionRange: React.FC<SearchOptionRangeProps> = props => {

  const [lowValue, setLowValue] = useState(props.start);
  const [highValue, setHighValue] = useState(props.end);

  const handleLow = (event: any) => {
    setLowValue(event.target.value);
  }

  const handleHigh = (event: any) => {
    setHighValue(event.target.value);

  }

  const updateValues = (value: any) => {
    setLowValue(Number(value[0]));
    setHighValue(Number(value[1]));
  };

  return (
        <div className={props.name}>
          <div className="option-name">{props.name}</div>
          <Nouislider
            start={[props.start, props.end]}
            connect={true}
            range={{
              min: props.start,
              max: props.end
            }}
            step={props.step}
            onUpdate={ (value) => updateValues(value) }
          />
          <div className="inputs">
            <input type="text" value={lowValue} onChange={ (event) => handleLow(event)}></input>
            <input type="text" value={highValue} onChange={ (event) => handleHigh(event)}></input>
          </div>
        </div>
  );
};

我的组件是这样调用的。

<SearchOptionRange name="price" start={300} end={25000} step={50}></SearchOptionRange>

目的是在我将值输入输入时更新滑块。反之亦然（滑块拖动更新输入值）。

它看起来如何

我只是想不通在输入输入时如何更新滑块。有人可以帮助我吗？

Answer 1

这是你的答案：https ://codesandbox.io/s/affectionate-visvesvaraya-xdy1w

当您在每个输入中键入一个数字时，滑块的值会更新并且处理程序会四处移动。