Fluentui: Value at the state of Slider is not updated by changing value via property

[WhiteCyClop]

Environment Information

office-ui-fabric-react: 7.84.0,
Browser and OS versions: Google Chrome Version 79.0.3945.130 (Official Build) (64-bit)

Describe the issue:

After changing of the slider's value by property, it`s state is not updated.

Actual behavior:

See codepen example:
Default value of the Slider is 0. After changing it's value by button (via property) to another value it is impossible to set thumb of Slider to 0 by click on slider.

Expected behavior:

After changing slider's value by button, clicking on slider to the value, that was set before pressing the button, changes slider's thumb position.

If applicable, please provide a codepen repro:

https://codepen.io/Beliy_Cyclop/pen/RwNEqpX

Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? No

Requested priority: Normal

Products/sites affected: -

[khmakoto]

Hi @WhiteCyClop thanks for filing this issue! I've confirmed that this is happening and will be working towards getting a fix for this as soon as possible. Thanks again!

[aneeshack4]

@WhiteCyClop I'm not able to repro this - when I click the "Slider increase" button, I can still drag it back to 0.

[WhiteCyClop]

@aneeshack4 After changing value by button did you just click on the default value of slider or drag thumb?

[aneeshack4]

@WhiteCyClop I clicked both the slider increase button and the drag thumb - there seem to be no problems. What do you mean by "click on the default value of slider"? the number to the right that represents the current value of the slider isn't a click target...

[aneeshack4]

@WhiteCyClop Actually I get it now - looking into this!

[aneeshack4]

@WhiteCyClop any reason in particular you're using a custom onIncrease instead of the onChange that comes with default Fabric Slider? https://codepen.io/pen/?&editable=true I believe the problem is with that onIncrease callback because the default Fabric Sliders on the examples page don't have this issue.

[WhiteCyClop]

@aneeshack4 for example, I want to do a zoom component with a slider and increase/decrease buttons. So onChange of slider is used to update value by dragging thumb and click on buttons changes value and flows it to the slider via props. The problem is a slider doesn't update its internal state as the result of changes in props.

[aneeshack4]

@WhiteCyClop I think slider does update internal value when triggered by props change actually: https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/experiments/src/components/Slider/Slider.base.tsx#L382

[WhiteCyClop]

@aneeshack4 it updates internal state only by onKeyDown and onMouseMoveOrTouchMove, isn't it? If you just flow new value by props, slider will render right, but won't update internal state.

[rishab-pdx]

@WhiteCyClop I was able to get the slider working. I haven't looked into the internals yet, I made use of the onChanged prop to set the slider rather than the onChange . May be you should completely wait before the value change is complete and the setValue. Here is the codepen

[WhiteCyClop]

@rishab-pdx, thanks for your reply. As I said before, I want to make the zoom component, so for the interactivity of the GUI, the value must be changed at the same time as dragging the slider and I have to use onChange. I believe the problem is mixing a controlled and uncontrolled approach to creating components. At such cases in our components, we usually use getDerivedStateFromProps() to update component's internal state as the result of changes in it's props.