Does not work with ng-show

CorbynS commented 11 years ago

When the slider is wrapped with-in an element that has an ng-show defaulted to false, the slider does not appear correctly initially.

Code example: javascript:

var app = angular.module('practice', ['uiSlider']);

app.controller('sliderCtrl', function($scope) {
    $scope.name= "Temp";
    $scope.lowAge= 30;
    $scope.highAge= 45;
});

html:

<body ng-app="practice">
    <div ng-controller="sliderCtrl">
    Slider wanted?<input type="checkbox" ng-model="wantSlider" />
        <span ng-show="wantSlider">
            <p>Name: {{name}}</p>
                <p>Minimum Age: {{lowAge}}</p> 
                <p>Maximum Age: {{highAge}}</p> 
                 <slider floor="10" ceiling="60" ng-model-low="lowAge"
                            ng-model-high="highAge"></slider>
        </span>
       </div>
    <script src="app.js"></script>
</body>

With this code block the initial pointers will both be placed to the far left. Once I attempt to drag the pointers the slider is displayed correctly. This bug has been verified on Chromium Version 28.0.1500.71 Ubuntu 12.04 (28.0.1500.71-0ubuntu1.12.04.1) and Firefox version 23.0 for Ubuntu 12.04

pinoyyid commented 11 years ago

probably related, uislider doesn't work within angularui tabs.

The following works ...

<slider floor="1" ceiling="60" ng-model-low="peeks.b" ng-model-high="peeks.t"></slider>                     
<tabset id="cntabs">

Wheras this ...

<tabset id="cntabs"> 
<slider floor="1" ceiling="60" ng-model-low="peeks.b" ng-model-high="peeks.t"></slider>

displays the bubble on the left and is not draggable along the slider bar.

CorbynS commented 11 years ago

I have also noticed the issue rsmithh points out above.

RavenHursT commented 11 years ago

Yeah.. I'm seeing this problem as well. Prajwalkman, this severely limits the use of this REALLY cool directive.. Any possibility we can get a fix?

dylan-baskind commented 10 years ago

Getting same problem :( When initially hidden with an ng-show the slider handle is "stuck" on the far left of the slider and won't move.

Same problem in a more specific case: when directive is created dynamically from HTML snippet stored in database.

Either-way, great work on this directive @prajwalkman (wonderful to have a slider without lugging in the massive JqueryUI library).

ghost commented 10 years ago

@rsmithh I am getting the same problem inside tabset directive from angular-ui, any ideas how to fix it?

deloschang commented 10 years ago

Same issue. would love to see a fix

jamieotter commented 10 years ago

The problem seems to be in the dimensions function, it sets all widths up but when the element isn't visible all the widths are zero until a watch fires and redraws things. One way to resolve this is to force the slider to redraw when made visible, this can be accomplished by adding the following watch to the post link function, roughly line 134 in the latest angular-slider.js file:

scope.$watch(function() {               
    return element.is(':visible');
}, function(isVisible) {
    if (isVisible) {
        updateDOM();  //existing function that redraws everything
    }
});

deloschang commented 10 years ago

The above fix works. Although in the long run, it may just be better to go with a new Angular slider library since this one is deprecated.

RavenHursT commented 10 years ago

@deloschang, which project are you referring to?

prajwalkman / angular-slider

Does not work with ng-show #25