AngularJS-Slider in AngularUI Tabs
Yes it is possible!
HTML
<link rel="stylesheet" href="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script>
<div ng-app="myapp">
<div ng-controller="TestController as vm">
<p>Price 1: {{vm.priceSlider1.value}}</p>
<p>Price 2: {{vm.priceSlider2.value}}</p>
<h2>Toggle slider example</h2>
<button ng-click="vm.toggle()">{{ vm.visible ? 'Hide' : 'Show' }}</button>
<br/>
<div ng-show="vm.visible">
<rzslider rz-slider-model="vm.slider_toggle.value" rz-slider-options="vm.slider_toggle.options"></rzslider>
</div>
</div>
</div>
JavaScript
var myApp = angular.module('myapp', ['rzModule']);
myApp.controller('TestController', TestController);
function TestController($scope, $timeout) {
var vm = this;
vm.visible = false;
vm.slider_toggle = {
value: 100,
options: {
floor: 0,
ceil: 500
}
};
vm.toggle = function () {
vm.visible = !vm.visible;
if (vm.visible)
vm.refreshSlider();
};
vm.refreshSlider = function () {
$timeout(function () {
$scope.$broadcast('rzSliderForceRender');
});
};
}