<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="http://code.angularjs.org/1.2.16/angular-resource.js"></script>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-moment-picker/0.10.2/angular-moment-picker.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css">
<!-- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/7.0.0/rzslider.css" integrity="sha256-9T1f0rN2mygyVpOn3WgE+1IJub+EMJbWsRbauX0SCR0=" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div id="accordion" class="panel-group">
<div class="panel panel-default col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#panelBodyOne" ng-click="refreshSlider()"
class="accordion-toggle collapsed " data-toggle="collapse"
data-parent="#accordion">Developing</a>
</h4>
</div>
</div>
<div class="panel panel-default col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#panelBodyTwo" ng-click="refreshSlider()"
class="accordion-toggle collapsed" data-toggle="collapse"
data-parent="#accordion">Designing</a>
</h4>
</div>
</div>
<div class="panel panel-default col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#panelBodyThree" ng-click="refreshSlider()"
class="accordion-toggle collapsed" data-toggle="collapse"
data-parent="#accordion">Testing</a>
</h4>
</div>
</div>
<div class="row panel">
<div id="panelBodyOne" class="panel-collapse collapse">
<br>
<br>
<br>
<div class="panel-body">
<rzslider rz-slider-model="DevelopingSlider.value" rz-slider-options="DevelopingSlider.options">
</rzslider>
</div>
</div>
<div id="panelBodyTwo" class="panel-collapse collapse">
<br>
<br>
<br>
<div class="panel-body">
<p>
Designing
</p>
<rzslider rz-slider-model="DesigningSlider.value" rz-slider-options="DesigningSlider.options">
</rzslider>
</div>
</div>
<div id="panelBodyThree" class="panel-collapse collapse">
<br>
<br>
<br>
<div class="panel-body">
<rzslider rz-slider-model="TestingSlider.value" rz-slider-options="TestingSlider.options">
</rzslider>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
var app = angular.module("MyApp", ['rzSlider']);
app.controller("MyController", function ($scope, $rootScope, $timeout, $http, $filter) {
$scope.refreshSlider = function () {
$timeout(function () {
$rootScope.$broadcast('rzSliderForceRender');
});
};
$scope.DevelopingSlider = {
value: 5,
options: {
floor: 0,
ceil: 10,
showSelectionBar: true,
getPointerColor: function (value) {
if (value <= 5)
return 'red';
if (value <= 8)
return 'orange';
if (value <= 10)
return 'Green';
}
},
}
$scope.DesigningSlider = {
value: 6,
options: {
floor: 0,
ceil: 10,
showSelectionBar: true,
getPointerColor: function (value) {
if (value <= 5)
return 'red';
if (value <= 8)
return 'orange';
if (value <= 10)
return 'Green';
},
},
};
$scope.TestingSlider = {
value: 7,
options: {
floor: 0,
ceil: 10,
showSelectionBar: true,
getPointerColor: function (value) {
if (value <= 5)
return 'red';
if (value <= 8)
return 'orange';
if (value <= 10)
return 'Green';
}
},
};
})
#accordion .panel {
border-radius: 0;
border: 0;
margin-top: 0px;
}
#accordion a {
display: block;
padding: 10px 15px;
border-bottom: 1px solid #402d5e;
text-decoration: none;
}
/* #accordion .panel-heading a.collapsed:hover, */
#accordion .panel-heading a.collapsed:focus {
transition: all 0.2s ease-in;
}
#accordion .panel-heading {
padding: 0;
border-radius: 0px;
text-align: center;
}
#accordion .panel-heading a:not(.collapsed) {
color: white;
background-color: #402d5e;
transition: all 0.2s ease-in;
}
/* Add Indicator fontawesome icon to the left */
#accordion .panel-heading .accordion-toggle::before {
font-family: 'FontAwesome';
content: '\f00d';
float: left;
color: white;
font-weight: lighter;
transform: rotate(0deg);
transition: all 0.2s ease-in;
}
#accordion .panel-heading .accordion-toggle.collapsed::before {
color: #444;
transform: rotate(-135deg);
transition: all 0.2s ease-in;
}