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>

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

How it looks like

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

Answer 1

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

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

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

1 个答案: