Slider ticks initially misplaced when used in mdDialogs

[johnrix]

Steps to reproduce

1. Include slider in an Angular Material pop-up dialog ($mdDialog)
2. Trigger the dialog

Demo: http://jsfiddle.net/agk7ye2w/

Expected behaviour

Ticks should span the full width of the slider

Actual behaviour

Last tick appears in the center. On clicking the slider, it redraws itself correctly.

Am assuming this is on account of the slider drawing while the dialog is still scaling up. I tried adding an ng-if on the slider so that it only draws after a 500ms timeout, and this avoids the issue, but looks poor as the dialog expands when the slider appears.

[ValentinH]

Probably you are facing this: https://github.com/angular-slider/angularjs-slider#my-slider-is-not-rendered-correctly-on-load

[johnrix]

Ah, my apologies, I missed that section! It would appear to be the issue.

The fix is a little awkward though, as the re-render can't happen until the dialog is fully expanded, which requires at least a 400-500ms timeout to work. The re-render is quite noticeable as a result.

I've worked around it with the following variant now though:

$interval(function () {
    $scope.$broadcast('rzSliderForceRender');
}, 25, 15, false);

Admittedly not very efficient, but it smooths over the rendering as the dialog expands into view.