Skip to content

I
i20rzslider
Commit 162f2da6 authored by Rafal Zajac's avatar Rafal Zajac
Browse files
Options

Merge pull request #52 from psalaberria002/gh-pages-modal 

Added bootstrap modal to the examples
parents 96f723e9 c658b5d4
Show whitespace changes
Inline Side-by-side
Showing with 97 additions and 12 deletions
index.html
View file @ 162f2da6
...@@ -8,6 +8,8 @@ ...@@ -8,6 +8,8 @@
<link rel="stylesheet" href="demo.css" /> <link rel="stylesheet" href="demo.css" />
<link rel="stylesheet" href="rzslider.css" /> <link rel="stylesheet" href="rzslider.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head> </head>
<body ng-controller="MainCtrl"> <body ng-controller="MainCtrl">
...@@ -63,15 +65,25 @@ ...@@ -63,15 +65,25 @@
rz-slider-translate="alphabetTranslate"></rzslider> rz-slider-translate="alphabetTranslate"></rzslider>
</article> </article>
<article>
<h2>Sliders into modal</h2>
Normal slider value: {{percentages.normal.low}}%
</br>
Range slider values: {{percentages.range.low}}% and {{percentages.range.high}}%
</br>
<button type="button" ng-click="openModal()" class="btn btn-default btn-lg">Open Modal!</button>
</article>
</div> </div>
</body> </body>
<script src="angular.min.js"></script> <script src="angular.min.js"></script>
<script src="rzslider.js"></script> <script src="rzslider.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>
<script> <script>
var app = angular.module('plunker', ['rzModule']); var app = angular.module('plunker', ['ui.bootstrap','rzModule']);
app.controller('MainCtrl', function($scope) app.controller('MainCtrl', function($rootScope,$scope,$modal)
{ {
$scope.priceSlider = { $scope.priceSlider = {
min: 100, min: 100,
...@@ -95,7 +107,41 @@ ...@@ -95,7 +107,41 @@
{ {
return alphabetArray[value].toUpperCase(); return alphabetArray[value].toUpperCase();
}; };
$scope.percentages = {normal:{low:15},range:{low:10,high:50}};
$scope.openModal = function() {
var modalInstance = $modal.open({
templateUrl: 'sliderModal.html',
controller: function($scope, $modalInstance,values){
$scope.percentages = JSON.parse(JSON.stringify(values)); //Copy of the object in order to keep original values in $scope.percentages in parent controller.
$scope.formatToPercentage = function(value){
return value+'%';
};
$scope.ok = function(){
$modalInstance.close($scope.percentages);
};
$scope.cancel = function(){
$modalInstance.dismiss();
};
},
resolve: {
values: function() {
return $scope.percentages;
}
}
}); });
modalInstance.result.then(function(percentages){
$scope.percentages = percentages;
});
modalInstance.rendered.then(function(){
$rootScope.$broadcast('rzSliderForceRender');//Force refresh sliders on render. Otherwise bullets are aligned at left side.
});
};
});
</script> </script>
</html> </html>
rzSliderTpl.html 0 → 100644
View file @ 162f2da6
<span class="rz-bar"></span> <!-- 0 The slider bar -->
<span class="rz-bar rz-selection"></span> <!-- 1 Highlight between two handles -->
<span class="rz-pointer"></span> <!-- 2 Left slider handle -->
<span class="rz-pointer"></span> <!-- 3 Right slider handle -->
<span class="rz-bubble rz-limit"></span> <!-- 4 Floor label -->
<span class="rz-bubble rz-limit"></span> <!-- 5 Ceiling label -->
<span class="rz-bubble"></span> <!-- 6 Label above left slider handle -->
<span class="rz-bubble"></span> <!-- 7 Label above right slider handle -->
<span class="rz-bubble"></span>
\ No newline at end of file
rzslider.js
View file @ 162f2da6
...@@ -260,7 +260,7 @@ function throttle(func, wait, options) { ...@@ -260,7 +260,7 @@ function throttle(func, wait, options) {
{ {
self.resetLabelsValue(); self.resetLabelsValue();
thrLow(); thrLow();
thrHigh(); if(this.range) thrHigh();
self.resetSlider(); self.resetSlider();
}); });
...@@ -975,15 +975,10 @@ function throttle(func, wait, options) { ...@@ -975,15 +975,10 @@ function throttle(func, wait, options) {
rzSliderHideLimitLabels: '=?', rzSliderHideLimitLabels: '=?',
rzSliderAlwaysShowBar: '=?' rzSliderAlwaysShowBar: '=?'
}, },
template: '<span class="rz-bar"></span>' + // 0 The slider bar
'<span class="rz-bar rz-selection"></span>' + // 1 Highlight between two handles templateUrl: function(elem, attrs) {
'<span class="rz-pointer"></span>' + // 2 Left slider handle return attrs.rzSliderTplUrl || 'rzSliderTpl.html'
'<span class="rz-pointer"></span>' + // 3 Right slider handle },
'<span class="rz-bubble rz-limit"></span>' + // 4 Floor label
'<span class="rz-bubble rz-limit"></span>' + // 5 Ceiling label
'<span class="rz-bubble"></span>' + // 6 Label above left slider handle
'<span class="rz-bubble"></span>' + // 7 Label above right slider handle
'<span class="rz-bubble"></span>', // 8 Range label when the slider handles are close ex. 15 - 17
link: function(scope, elem, attr) link: function(scope, elem, attr)
{ {
......
sliderModal.html 0 → 100644
View file @ 162f2da6
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-lg-12">
<label for="name" class="control-label">Normal slider into modal</label>
<rzslider
rz-slider-floor="0"
rz-slider-ceil="100"
rz-slider-model="percentages.normal.low"
rz-slider-translate="formatToPercentage"
rz-slider-always-show-bar="true">
</rzslider>
</div>
</div>
<div class="row">
<div class=" col-md-12 col-lg-12">
<label for="name" class="control-label">Range slider into modal</label>
<rzslider
rz-slider-floor="0"
rz-slider-ceil="100"
rz-slider-model="percentages.range.low"
rz-slider-high="percentages.range.high"
rz-slider-translate="formatToPercentage"
rz-slider-always-show-bar="true">
</rzslider>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<button type="button" ng-click="ok()" class="btn btn-primary">Save</button>
<button type="button" ng-click="cancel()" class="btn btn-default">Cancel</button>
</div>
</div>
</div>
</div>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment