Slider: When I pass a new defaultValue, the handles aren't moved

[nitroamos]

I've got a component that looks like this:

import RcSlider from 'rc-slider';
import 'rc-slider/assets/index.css';
import 'rc-tooltip/assets/bootstrap.css';
const createSliderWithTooltip = RcSlider.createSliderWithTooltip;
const Range = createSliderWithTooltip(RcSlider.Range);

    let defaultValue = [];
    if(valMin !== null && valMax !== null) {
      defaultValue = [valMin, valMax];
    }
    console.log("slider defaultValue:",defaultValue);
    return (
        <div>
          <Range min={min} max={max} step={0.5} defaultValue={defaultValue}
                 tipProps={{overlayClassName:"highZIndex"}}
                 marks={marks}
                 included={true}
                 onAfterChange={(values) => this.updateRange(values)}
          />
        </div>)
  }

where defaultValue is computed as a part of the props of my container class. When new values are set from outside my container (e.g., when they're reset to their initial values) then the handles aren't moved.

I'm using the latest version 8.3.1.

Any ideas?

Thanks!

[nitroamos]

I closed this when I realized there's a value prop I can set. However, that's not what I want either: it looks like it locks the handles into that position. What I'm looking for is the ability to change the current location (if the value is changed somewhere else) but retain the ability to move the handles.

It looks like I can address this by computing key from defaultValue, which is derived from props. This works, but seems a bit awkward to me. Is there another way?

[heavybeard]

I'm on the same issue, I've tried with component state too, but it doesn't work.
How did you fix this? Had you create a child component and had you pass value as props?

[Robin-front]

yes, when you pass value, component become a controlled component. what you see is what you pass.

But, when you try to move handles, a onChange event will be trigger. You could get new values and setState.

This is the official example code or here: Customized Range

I hope it is helpful to you.

[heavybeard]

Thank you guys!