angularjs-slider: Slider position not set on load

Using angular-fullstack I am setting a slider with the scope value like so:

$scope.sliderValue = 100;

and the markup:

        <rzslider rz-slider-model="sliderValue"
            rz-slider-floor="2"
            rz-slider-hide-limit-labels = "false"
            rz-slider-ceil="100"
            rz-slider-always-show-bar="true"></rzslider>

I am displaying the value of the slider on the page and it is correctly set to 100, but the slider position is stuck at 0 until i click on it, then it jumps up to where it’s supposed to be.

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 72 (28 by maintainers)

Most upvoted comments

For the ng-show and tab problems, I have looked into this further and have a solution that gets rid of any flickering. In angularjs v1.2, the slider did not require a timeout and could be force rendered immediately. This is the breaking commit that defers ng-show until the end of the digest cycle.

So, running force render in post digest instead of JavaScript’s next execution cycle (setTimeout) will get rid of any flickering (jsfiddle):

$scope.$$postDigest(function () {
    $scope.$broadcast('rzSliderForceRender');
});

Also, if you want to continue using $setTimeout you should at least stop it from running digest again, since rzSliderForceRender does not require another digest:

$timeout(function () {
    $scope.$broadcast('rzSliderForceRender');
}, 0, false);

maknapp on May 13, 2016

I got over this issue by increasing timeout delay to above 170ms. $timeout(function () { $scope.$broadcast('rzSliderForceRender'); },170); I think this is the rendering time taken in my case.

Dreamerpro on Jun 12, 2016

With ng-if works, not with ng-show

Luddinus on Nov 3, 2015

Please, I won’t help you if you don’t provide materials! I’m not supposed to go and read all your code, people are are contributing on their free time. If you want enterprise support, then pay somebody for that.

ValentinH on Dec 20, 2016

@rsrikanth080 - Please be considerate of our time. Searching through your source code to help you isn’t ideal. A JSFiddle would be better and would probably also help you by isolating the issue.

mjknight50 on Dec 20, 2016

You probably don’t need to broadcast on the whole $rootscope, $scope.$broadcast might be enough 😉

ValentinH on Jun 2, 2016

There you go: http://codepen.io/ValentinH/pen/yNQKXR?editors=001

You had several Angular-related problem:

first you were not calling the broadcast function of the MainCtrl correctly (you should use the controllerAs synthax btw).
don’t use setTimeout() but $timeout (https://coderwall.com/p/udpmtq/angularjs-use-timeout-not-settimeout)

Finally, in your example, it also works without wrapping the $scope.$broadcast('reCalcViewDimensions') with $timeout but it depends on the step plugin sequencing. To be sure that it is always called after the view is shown, use $timeout so the broadcast is called in the next JS loop.

ValentinH on Jul 29, 2015