Add a rz-slider-disabled attribute to the example page

73f3160c · Valentin Hervieu · d580e1cc · 73f3160c
Commit 73f3160c authored Oct 09, 2015 by Valentin Hervieu
Show whitespace changes
Inline Side-by-side

Showing with 115 additions and 105 deletions

index.html index.html +115 -105

No files found.
--- a/index.html
+++ b/index.html
@@ -2,11 +2,11 @@
 <html ng-app="plunker">

 <head>
-    <meta charset="utf-8" />
+    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AngularJS Touch Slider</title>
-    <link rel="stylesheet" href="demo.css" />
-    <link rel="stylesheet" href="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.css" />
+    <link rel="stylesheet" href="demo.css"/>
+    <link rel="stylesheet" href="https://rawgit.com/rzajac/angularjs-slider/master/dist/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">
@@ -14,14 +14,15 @@

 <body ng-controller="MainCtrl">

-    <div class="wrapper">
+<div class="wrapper">
    <header>
        <h1>AngularJS Touch Slider</h1>
    </header>

    <article>
        <h2>Min/max slider example</h2>
-            Value: <pre>{{ priceSlider | json }}</pre>
+        Value:
+        <pre>{{ priceSlider | json }}</pre>

        <input type="text" ng-model="priceSlider.min"/><br/>
        <input type="text" ng-model="priceSlider.max"/><br/>
@@ -103,6 +104,15 @@
                  rz-slider-show-ticks-value="true"></rzslider>
    </article>

+    <article>
+        <h2>Disabled slider example</h2>
+        <label>Disable slider <input type="checkbox" ng-model="disableSlider"></label>
+        <rzslider rz-slider-model="priceSlider8"
+                  rz-slider-floor="0"
+                  rz-slider-ceil="10"
+                  rz-slider-disabled="disableSlider"></rzslider>
+    </article>
+
    <article>
        <h2>Sliders into modal</h2>
        Normal slider value: {{percentages.normal.low}}%
@@ -112,17 +122,16 @@
        <button type="button" ng-click="openModal()" class="btn btn-default btn-lg">Open Modal!</button>
    </article>

-    </div>
+</div>
 </body>

 <script src="angular.min.js"></script>
 <script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.min.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', ['ui.bootstrap','rzModule']);
+    var app = angular.module('plunker', ['ui.bootstrap', 'rzModule']);

-    app.controller('MainCtrl', function($rootScope,$scope,$modal)
-    {
+    app.controller('MainCtrl', function($rootScope, $scope, $modal) {
        $scope.priceSlider = {
            min: 100,
            max: 400,
@@ -130,6 +139,8 @@
            floor: 0
        };

+        $scope.disableSlider = true;
+
        $scope.priceSlider2 = 150;
        $scope.priceSlider3 = 250;
        $scope.priceSlider4 = 5;
@@ -139,33 +150,32 @@
            min: 2,
            max: 8
        };
+        $scope.priceSlider8 = 5;

-        $scope.translate = function(value)
-        {
+        $scope.translate = function(value) {
            return '$' + value;
        };

        var alphabetArray = 'abcdefghijklmnopqrstuvwxyz'.split('');
        $scope.letter = 5;
        $scope.letterMax = alphabetArray.length - 1;
-        $scope.alphabetTranslate = function(value)
-        {
+        $scope.alphabetTranslate = function(value) {
            return alphabetArray[value].toUpperCase();
        };

-        $scope.percentages = {normal:{low:15},range:{low:10,high:50}};
+        $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){
+                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.formatToPercentage = function(value) {
+                        return value + '%';
                    };
-                    $scope.ok = function(){
+                    $scope.ok = function() {
                        $modalInstance.close($scope.percentages);
                    };
-                    $scope.cancel = function(){
+                    $scope.cancel = function() {
                        $modalInstance.dismiss();
                    };
                },
@@ -176,11 +186,11 @@
                }
            });

-            modalInstance.result.then(function(percentages){
+            modalInstance.result.then(function(percentages) {
                $scope.percentages = percentages;
            });

-            modalInstance.rendered.then(function(){
+            modalInstance.rendered.then(function() {
                $rootScope.$broadcast('rzSliderForceRender');//Force refresh sliders on render. Otherwise bullets are aligned at left side.
            });
        };