Slider not set position on load inside Bootstrap modal

[karanvirrkumar]

I have tried many ways earlier of issues that were closed.

My slider psoition is not set on load if it is inisde bootstrap modal. It works if I click on it or resize my screen

I have added a plunkr for a demo. Please check it out and help me out..

https://plnkr.co/edit/espUYkaRlJE7JgtANciF

[ValentinH]

As explained in other issues and on the "Sliders inside a modal" demo (https://angular-slider.github.io/angularjs-slider/), you need to call $rootScope.$broadcast('rzSliderForceRender'); when the accordion is opening.

[karanvirrkumar]

I have added `** $rootScope.$broadcast('rzSliderForceRender');** into function and called it on all 3 accordian collapsed divs, it worked but not fully.
please follow the steps as below to find issue:-

1. open first div - it wont work
   it will make everything fine for 2nd and 3rd div.

2. click on 2nd div - it will work fine

3. click on 3rd div - it will work fine but it will ruin everything for 2nd div.

4. now click on 2nd div (everything ruined).

check this new plunkr after adding $rootscope
https://embed.plnkr.co/HAjNMOnw5ahGDGzMDKcZ/

[salehasadi]

@officialkansal HI, I know that maybe this is not a good way of handle this but I hope that help because it helped me, I found it accidentallty :-D
call a window resize event with a 500ms or less timeout after on opening the modal and it will work.

setTimeout(() => { window.dispatchEvent(new Event('resize')); // $(window).trigger('resize'); }, 500);