Slider not initialized at the right position

[Deams51]

The sliders are not initialized at the right position and require a click or a value modification to update to the correct position.

[G33kLabs]

I have the same issue.

It's when the slider is inited but hidden 'ng-hide' and then we reveal it by a click or any other interactions. In facts, the getBoundingClientRect of the element is null in this case.

<ul class="col-sm-12 list-unstyled" id="servos-sliders">
    <li ng-repeat="d in config.devices" class="col-sm-4">
        <div class="row" ng-show="d.$editable">
            <div class="col-xs-9">
                <input ng-model="d.name" type="text" class="form-control">
            </div>
            <div class="col-xs-3">
                <input ng-model="d.pin" type="text" class="form-control">
            </div>
        </div>
        <div class="row" ng-hide="d.$editable" ng-click="d.$editable=true">
            <div class="col-xs-12">
                {{d.name}}
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12" ng-show="d.$editable">
                <slider floor="800" ceiling="2200" ng-model-low="d.timematrix[0][1]" ng-model-high="d.timematrix[1][1]"></slider>
            </div>
            <div class="col-sm-12" ng-hide="d.$editable">
                <slider floor="0" ceiling="100" ng-model="d.progress"></slider>
            </div>
        </div>
    </li>
</ul>

The solution I found for moment is to call the resize event after each update and embedded with a setTimeout

setTimeout(function() {
    window.dispatchEvent(new Event('resize'));
}, 0);

[simonberger]

Thank you alot. Saved me headaches how to solve this problem.