Untitled

<!DOCTYPE html>
<html ng-app="testApp">

  <head>
    <script data-require="angular.js@*" data-semver="1.2.1" src="http://code.angularjs.org/1.2.1/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://rawgithub.com/prajwalkman/angular-slider/master/angular-slider.css" />
    <script src="https://rawgithub.com/prajwalkman/angular-slider/master/angular-slider.js" type="text/javascript" charset="utf-8"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="testCtrl">
    <p>Slider in a non-hidden element:</p>
    <slider floor="10" ceiling="60" ng-model-low="position.minAge" ng-model-high="position.maxAge"></slider>

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

</html>

// Code goes here

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

  $scope.fixTheSlider = function () {
    $scope.position3 = {
      minAge: 20,
      maxAge: 40
    };
  }
});

/* Styles go here */

Demonstrating how the slider handles don't start properly when inside a hidden element.