range-slider__range has no style when the range input is initialized

[s2i-evolution]

Hello,

I'm facing an issue when i want to use the range input. In fact it work normally but at the init the .range-slider__range has no style left & width, so the range bg is full width.

I'm using the 2.4.3 package

My code :

var delta = 5000;
var minBudget = $('input[name="minBudget"]').val() ? parseInt($('input[name="minBudget"]').val()) + delta : 150000;
var maxBudget = $('input[name="maxBudget"]').val() ? parseInt($('input[name="maxBudget"]').val()) - delta : 550000;
const rangeSliderElement = rangeSlider(document.querySelector('#bugdet_slider'), {
  min: 50000,
  max: 800000,
  step: 1000,
  value: [minBudget, maxBudget],
  onInput: v => {
    value = v
    update()
  },
});

I have tested with a simplier declaration but it was the same

rangeSlider(document.querySelector('#bugdet_slider'));

[n3r4zzurr0]

I can't reproduce this behavior with the provided information. This could be due to the HTML element that you're selecting, or may be due to the parent(s) of that element.

[mekedron]

+1, the same issue

Probably it happens when the component is hidden with display: none on a parent which switches into display: block using state of a parent component. I had to unmount the component when it's hidden and mount back when it's visible and it helped.

Also you could fix with dispatching resize event on parent block using ref after some timeout when it gets initialized with the broken range styles.

Cheers

[rubenbristian]

I also found the same issue with a component inside a hidden parent.

[hehded]

window.onload = function() {

Actually window onload have helped me to fix this problem, idk what was the reason of initialization failure