Slider: How do I reset values for slider

[doshisunny]

I have a slider as below which uses marks for custom dates.
Sliding functionality is working. Once slider moves and certain point I want to reset slider to defult values after some action (For e.g Button click).

There is not reset or custom method option in props which I can use.
What is the best way to do that?

Original Slider :

User Changes Slider to :

After reset button click it need to go back to :

[yesmeck]

Use prop value to convert Slider to a controlled component.

[sandervanhooft]

I have the same issue. As soon as I use the value prop, I am unable to grab the slider handles.

@yesmeck Do you perhaps have an example solution for this use case specific to rc-slider?

[yesmeck]

@sandervanhooft See https://github.com/ant-design/ant-design/wiki/FAQ#i-set-the-value-of-inputselectetc-and-then-it-cannot-be-changed-by-users-action

[icambron]

@yesmeck This is a little bit confusing. Changing defaultValue makes a lot of sense, but the component's componentWillReceiveProps() ignores changes to defaultValue. Thus the component won't rerender. Is this a bug, or expected behavior? If it's expected, then I'm confused on how to accomplish the goal outlined by the OP.

[yesmeck]

defaultValue is not considered to change, if you want change value of slider, use value. See

https://facebook.github.io/react/docs/forms.html#controlled-components
https://facebook.github.io/react/docs/uncontrolled-components.html

[icambron]

@yesmeck but if I set value the user can't make further edits. Here is a fiddle: if I change defaultValue to value then slider is locked in place. Perhaps I'm being dense, but I don't see how using an uncontrolled component would help, since then I wouldn't be able to actually set it. (Another fiddle). What am I missing?

[yesmeck]

but I don't see how using an uncontrolled component would help

Then you should use controlled component.

[icambron]

@yesmeck that's my first fiddle though, right? I think I must be missing something more basic here.

[yesmeck]

No, your first fiddle is still a uncontrolled component. A controlled component means you pass value to the component and use onChange to collect the component value to the state.

See http://codepen.io/yesmeck/pen/evaJPP?editors=0010

[icambron]

Ah, OK, I get it now. Thanks for your time!

[linatoquica93]

@yesmeck thanks, I implemented and it works so fine!

[bodfaj13]

No, your first fiddle is still a uncontrolled component. A controlled component means you pass value to the component and use onChange to collect the component value to the state.

See http://codepen.io/yesmeck/pen/evaJPP?editors=0010

awesome, thanks!