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.