react-component / slider

React Slider

Home Page:https://slider.react-component.now.sh/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Can't dynamically add bounds

nemajeri opened this issue · comments

Maybe it's a bug in a library or something because the problem is fairly simple. I just need min and max values added dynamically. Here is the minimum working example of the implementation:

const CarSlider = () => {
  const [defaultValues, setDefaultValues] = useState([800, 1000]);

  const onChange = defaultValues => {
    setDefaultValues(defaultValues);
  };

  return (
    <div className='range-alignment'>
      <div className='range-text'>
        <p>Preisklasse</p>
        <p className='range-price'>
          {defaultValues[0]}€ - {defaultValues[1]}€
        </p>
      </div>
      <div className='range-btn-align'>
        <div className='range-width'>
          <Range
            defaultValue={[defaultValues[0], defaultValues[1]]}
            value={[defaultValues[0], defaultValues[1]]}
            allowCross={false}
            range
            tipFormatter={value => `${value}`}
            tipProps={{ visible: true }}
            min={defaultValues[0]}
            max={defaultValues[1]}
            onChange={onChange}
          />
        </div>
        <button className='range-button'>Filter</button>
      </div>
    </div>
  );
};

export default CarSlider;

In the code above values change but the two tooltips dont move with the cursor. When hardcoding the values min={800} and max={1000} everything works as it should. I double-checked the typeof both defaultValues and they are numbers which is appropriate data type for min and max. I need these values to not be hard-coded.

Which version are you on? I have no issue with dynamic min max values in 10.1.0

Btw, version 10+ Range and Slider are merged to just Slider, with the adding of the [range] attribute. In case you swap versions.

Which version are you on? I have no issue with dynamic min max values in 10.1.0

Btw, version 10+ Range and Slider are merged to just Slider, with the adding of the [range] attribute. In case you swap versions.

My version is 10.0.0. Will update to 10.1.0 to see if I manage to get it working. Range slider works well with hard coded values, but as soon as I switch them with the ones that I get from the state in a parent component, handles are not moving at all.