Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't dynamically add bounds #853

Open
nemajeri opened this issue Nov 14, 2022 · 2 comments
Open

Can't dynamically add bounds #853

nemajeri opened this issue Nov 14, 2022 · 2 comments

Comments

@nemajeri
Copy link

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.

@Joben28
Copy link

Joben28 commented Jan 11, 2023

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.

@nemajeri
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants