Slider: Range is not updated on state change

[ka7eh]

React: 16.7.0 + rc-slider:8.6.4

I have a slider range and on update its value is saved in the state. If I change the state via other inputs, the slider does not update.

Here is an example: https://jsfiddle.net/0yb3z7hf/1/
If you change the values in inputs boxes, nothing happens to the slider.

Strangely enough, if you remove the value prop on the Range component and turn it into an uncontrolled component, then it works, which is unexpected. Though first you have to move one of the handles and then change the input boxes to see the effect.

[klinkow]

This bug starts appearing after version 8.1.3.

[DarrylD]

Still having this issue (regardless of controlled or uncontrolled), any idea on a fix before I deep dive?

[mihalo]

Same problem for me, any fixes or work arounds?

[alvinbabujohn]

Have a similar issue with a form input coupling:
https://codesandbox.io/s/rc-slider-bootstrap-input-test-57rux

Have you had any luck with this issue @ka7eh ?

[Thebarda]

Having same issue

[alerg11]

I had this same issue and found a solution, maybe is not the finest but it works, at least until this issue gets fixed in the library.

You could add a key prop to the <Range> component with a dynamic value (Date.now() for example), and every time you change the state you need for updating the Slider, you also update this key prop with a new value ( Date.now() ).

This will "destroy" the <Range> component and create another one new with the new values you need, so the rendering works just fine.

I modified @alvinbabujohn example to show how it is..
https://codesandbox.io/s/rc-slider-bootstrap-input-test-fv46b

Hope it helps.