Added sliders into a bootstrap modal

dfefc47e · Paul Salaberria · 96f723e9 · dfefc47e · dfefc47e
Commit dfefc47e authored May 25, 2015 by Paul Salaberria
Hide whitespace changes
Inline Side-by-side

Showing with 83 additions and 2 deletions

index.html index.html +48 -2

sliderModal.html sliderModal.html +35 -0

No files found.
--- a/index.html
+++ b/index.html
@@ -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>
--- a/sliderModal.html
+++ b/sliderModal.html
+<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