react-nouislider
react-nouislider copied to clipboard
Slider does not work in functional components
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.