Slider stuck and not centered when use fade in - fade out

[johnico]

Steps to reproduce

1. i have empty page from directive A with some css
2. after its remove the css of empty page it just fade in/fade out a class ("element" .class="page") the page class contain the sliders
3. the slider are stuck to left even the value is 1.15 . until click on them and then they are go back to the center.

without fadein/fadeout . the sliders works great

thx for support

code directive A :

if(scope.emptyStatus == true)

            {
              $("#page").css('display','none');
              angular.element('html').css('background-image', 'url(\'' + "bg.jpg"+ '\')');

            }
            else {
              $(element).css('display','none');
            }

after some action:

  $('#emptyStatus').fadeOut(500);
                      angular.element('html').css('background-image', 'url(\'' + "bg.jpg"+ '\')');
                      $("#page").fadeIn(500);
                      scope.emptyStatus = false;

page controller:

        vm.brightSlider = {
          value: 1.15,
          options: {
             floor: 0.3,
             ceil: 2,
             step: 0.05,
             precision: 2,
            showSelectionBarFromValue: 1.15
          }
        };

slider code:

        <div class="brightnessSlider">
                      <rzslider rz-slider-model="vm.brightSlider.value"
                      rz-slider-options="vm.brightSlider.options"></rzslider>
                    </div>

[ValentinH]

https://github.com/angular-slider/angularjs-slider#my-slider-is-not-rendered-correctly-on-load

[ValentinH]

Also, handling show/hide of element via jQuery is not really the way to go with Angular. You should use ng-show or ng-if for that purpose, along with CSS transition if you need fading. This would not fix your issue but it would avoid future issues.

http://stackoverflow.com/a/22428497/1713469

[johnico]

thx . but how do I do the "click" on refreshSlider without ng-show or ng click
because i dont need ng click or ng show , it should upload without it

[johnico]

and I cant remove the fade in jquery now because its feature that working good for me :)

the fade in/out make the problem i guess but i cant replace it

[ValentinH]

You don't have to click on vm.refreshSlider but just call it like vm.refreshSlider() when you show the slider.

My remark about fading is just an advice for writing better Angular apps, but it's not the reason of your issue.

[johnico]

thx a lot