Slider is not working when placed on bootstrap tab.

[piotrh]

Hello, here is plunker to recreate the issue.

http://plnkr.co/edit/1N3wfm2YlVyEMRsu3oOb?p=preview

[LIDJungle]

Just wanted to share a workaround for this issue.

$('#mainTabs a[href="#tab4"]').on('shown', function(event) {
    $scope.$apply(function () {$scope.im_crate = $scope.im_crate * 1;});
});

My sliders are on "tab4". So we hook a 'shown' handler that will fire when the tab is shown.

<div class="row-fluid head">
    <input type="text" ng-model="im_crate" name="im_crate"></br>
    <slider floor="6" ceiling="20" step="1" ng-model="im_crate"></slider>
</div>

We update the value for im_crate, and call $apply to get the watch/$digest to fire. Since we don't want to actually change our value, we use the original and multiply it by 1 so that angular thinks it's new. If you take out the "* 1", then the slider will not update properly when you switch tabs.

This will work for any hidden DOM element. Just attach an event handler to fire when it is 'shown'. THX for the module praj.

[adityamenon]

Hey @LIDJungle, this plnkr is not exactly doing what you said, but I thought changing the model at the last moment would yield something. Can you explain why it's not working?

[LIDJungle]

Use jQuery to attach the handler.

// Code goes here
angular.module('testApp', ['uiSlider'])
  .controller('testCtrl', function($scope) {
    $scope.position = {
      minAge: 20,
      maxAge: 40
    };
    $scope.position2 = {
      minAge: 20,
      maxAge: 40
    };
    $scope.position3 = {
      minAge: 20,
      maxAge: 40
    };

    $('#fixCheck').on('click', function(event) {
      $scope.position3.minAge = $scope.position3.minAge * 1;
      alert("Fixing Slider!" + Number($scope.position3.minAge));
      $scope.position3.maxAge = $scope.position3.maxAge * 1;
    });
  });

<p>Slider in a hidden element (with fix):</p>
    <label><input type="checkbox" id="fixCheck" ng-model="showFixedSlider"> Show me it</label>
    <slider floor="10" id="fixSlider" ceiling="60" ng-model-low="position3.minAge" ng-model-high="position3.maxAge" ng-show="showFixedSlider"></slider>

Full Plunker: http://plnkr.co/edit/ewuDOXhDinai0PGGB91w

[adityamenon]

Oh wow. Thanks for the fix, and the example, @LIDJungle. +1 to you :)

[DmitryEfimenko]

+1. Good job @LIDJungle for providing a work around. However, since the library does not have a dependency for JQuery, the solution should not either. Also the actual fix needs to be at the library level.