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 @@
<link rel="stylesheet" href="demo.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'>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body ng-controller="MainCtrl">
......@@ -63,15 +65,25 @@
rz-slider-translate="alphabetTranslate"></rzslider>
</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>
</body>
<script src="angular.min.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>
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 = {
min: 100,
......@@ -95,7 +107,41 @@
{
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>
</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) {
{
self.resetLabelsValue();
thrLow();
thrHigh();
if(this.range) thrHigh();
self.resetSlider();
});
......@@ -975,15 +975,10 @@ function throttle(func, wait, options) {
rzSliderHideLimitLabels: '=?',
rzSliderAlwaysShowBar: '=?'
},
template: '<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>', // 8 Range label when the slider handles are close ex. 15 - 17
templateUrl: function(elem, attrs) {
return attrs.rzSliderTplUrl || 'rzSliderTpl.html'
},
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