react-nouislider icon indicating copy to clipboard operation
react-nouislider copied to clipboard

Slider does not work in functional components

Open KonradKlimczak opened this issue 2 years ago • 0 comments

With example like this

export const ComplexStateEditSlider = () => {
  const [state, setState] = useState({
    sliderValue: 10,
    inputValue: 'test',
  });

  const handleChangeSlider = ([sliderValue]) => {
    setState({ ...state, sliderValue: Number(sliderValue) });
  };

  return (
    <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
      <Input
        value={state.inputValue}
        onChange={(inputValue) => {
          setState({ ...state, inputValue });
        }}
      />
      <Slider width={400} value={state.sliderValue} onChange={handleChangeSlider} />
    </div>
  );
};

Slider will reset state for inputValue to it's default, because new references to onChange functions are not applied. it does not work onUpdate neither.

KonradKlimczak avatar Jan 04 '23 08:01 KonradKlimczak