release: update readme and examples and version

anandthakker · Sep 19, 2014 · 1cfa065 · 1cfa065
1 parent d67e3a0
commit 1cfa065
Show file tree

Hide file tree

Showing 7 changed files with 163 additions and 79 deletions.
diff --git a/README.md b/README.md
@@ -23,31 +23,65 @@ angular.module("YOUR ANGULAR MODULE", ['at.multirange-slider'])
 
 ###Use it
 ```html
-<slider model="{repeat expression}" [step="{step size}"]></slider>
+<slider [step="{step}"]>
+  <slider-range model="{assignable_model_value}" ng-repeat="{repeat_expression}">
+    <div class="slider-handle">&larr;&rarr;</div>
+  </slider-range>
+</slider>
 ```
 
-`{repeat expression}` is one of:
- - `assignable_exp for val in arrayExpression`
- - `assignable_exp for (key, val) in objectExpression`
+```html
+<slider [step="{step}"]>
+  <slider-range model="{assignable_model_value}" ng-repeat="{repeat_expression}">
+    <div class="..." slider-handle>&larr;&rarr;</div>
+  </slider-range>
+</step>
+```
+
+`{repeat expression}` a standard [ngRepeat](https://docs.angularjs.org/api/ng/directive/ngRepeat)
+comprehension.  Something like `(key,val) in mapObject` or `val in arrayThingy`.
 
-where `assignable_exp` is almost always something like `val.propertyName`.
+`assignable_model_value` is almost always something like `val.propertyName`.
 
 `step` is an optional attribute that locks the values into multiples of `{step size}`.
 
-See the [example](/dist/example.html)
+The handles are created by the [slider-handle directive](/src/multirange-slider.coffee#L82), which
+can be set by class or attribute.
+
+[Examples](/dist/example.html).
 
 ###Style it
-The markup generated is a containing `div` (`.slider-control`), a `div` for the actual slider bar (`.slider`, the js sets `position: relative`), and an absolutely-positioned `div` for each handle (`.slider-handle`).  The handles are children of the slider div, and their positioning is a percentage of the slider's width, so the whole thing *should* stretch/shrink to fit its containing element.  For example:
+The markup generated is a containing `div` (`.slider-control`), a `div` for the actual slider bar
+(`.slider`) and an inline-block `div` for each slider range (`.slider-range`).
+The ranges are children of the slider div, and their positioning is a percentage
+of the slider's width, so the whole thing *should* stretch/shrink to fit its containing element.
+The handles (`.slider-handle`) are floating right within the `slider-range` divs, with some margin tweaks so that they
+sit nicely centered on the border between ranges.
+
+For reference, the resulting markup from the first example:
 
 ```html
-<div class="slider-control ng-isolate-scope" model="otherProbs">
-  <div class="slider" style="position: relative;">
-    <div class="slider-handle" style="position: absolute; left: 30%; top: -8px;"></div>
-    <div class="slider-handle" style="position: absolute; left: 60%; top: -8px;"></div>
-  </div>
+<div class="at-multirange-slider">
+  <div class="slider" ng-transclude="" style="position: relative;">
+        <div class="slider-range ng-scope" ng-transclude="" model="val.p"
+          ng-repeat="(key,val) in otherProbs"
+          style="width: calc(21.4071428571429% - 0px); margin-left: 0px;">
+          <div class="slider-handle ng-scope" style="float: right; margin-right: -15.5px;">←→</div>
+        </div>
+        <div class="slider-range ng-scope" ng-transclude="" model="val.p"
+        ng-repeat="(key,val) in otherProbs"
+        style="width: calc(35.6785714285714% - 16px); margin-left: 16px;">
+          <div class="slider-handle ng-scope" style="float: right; margin-right: -15.5px;">←→</div>
+        </div>
+        <div class="slider-range ng-scope" ng-transclude="" model="val.p"
+        ng-repeat="(key,val) in otherProbs"
+        style="width: calc(42.8142857142857% - 15.5px); margin-left: 15.5px;">
+          <!-- Notice that this one doesn't have a handle in it, because it's the last. -->
+        </div>
+      </div>
 </div>
 ```
 
 Todo
 ------
-* Option for labeling ranges?
+* Touch events
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-multirange-slider",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "authors": [
     "Anand Thakker (http://github.com/anandthakker)"
   ],

diff --git a/dist/example.html b/dist/example.html
@@ -5,6 +5,13 @@
   <meta charset="UTF-8">
   <title>AngularJS responsive multi-range slider - CodePen</title>
   <link rel="stylesheet" href="multirange-slider.css" media="screen" type="text/css" />
+  <style>
+
+  .slider {
+    background: #022;
+  }
+
+  </style>
 </head>
 
 <body>
@@ -15,25 +22,29 @@ <h1>AngularJS Responsive Multi-range slider</h1>
     <div ng-controller="Ctrl" style="width: 50%;">
 
       <h2>Here's one with a map.</h2>
-      <p>
-        model: {{otherProbs}}
-      </p>
-      <input type='text' ng-model='val.p' ng-repeat='(key, val) in otherProbs'>
       <slider>
         <slider-range model="val.p" ng-repeat="(key,val) in otherProbs">
           <div class="slider-handle">&larr;&rarr;</div>
         </slider-range>
       </slider>
+      <input type='text' ng-model='val.p' ng-repeat='(key, val) in otherProbs'>
+      <p>
+        model: {{otherProbs}}
+      </p>
 
-<!--       <h2>Here's one with an array of objects and a setp size.</h2>
-<p>
-  model: {{probs}}
-  <br>property: "p"
-  <br>step: .05
-</p>
-<input type='text' ng-model='val.p' ng-repeat='val in probs'>
-<slider model="val.p for val in probs" step=".05"></slider>
- -->
+      <h2>Here's one with an array of objects, a step size, and some playing cards.</h2>
+      <slider step=".05">
+        <slider-range model="val.p" ng-repeat="val in probs">
+          <div class="slider-handle" ng-bind-html="val.symbol"></div>
+          <div class="slider-label">{{val.p | number:2 }}</div>
+        </slider-range>
+      </slider>
+      <input type='text' ng-model='val.p' ng-repeat='val in probs'>
+      <p>
+        model: {{probs}}
+        <br>property: "p"
+        <br>step: .05
+      </p>
     </div>
 
   </div>
@@ -44,20 +55,29 @@ <h2>Here's one with a map.</h2>
 
   <script type="text/javascript">
     angular.module("at.multirange-slider.example", ['at.multirange-slider'])
-    .controller("Ctrl", function($scope) {
-      $scope.probs = [{
-        p: 0.1
-      }, {
-        p: 0.5
-      }, {
-        p: 0.4
-      }];
-      $scope.otherProbs = {
-        key1: {p: 3},
-        key2: {p: 5},
-        key4: {p: 6}
-      };
-    });
+      .controller("Ctrl", function($scope, $sce) {
+        $scope.probs = [{
+          p: 0.1,
+          symbol: $sce.trustAsHtml('&hearts;')
+        }, {
+          p: 0.5,
+          symbol: $sce.trustAsHtml('&spades;')
+        }, {
+          p: 0.4,
+          symbol: $sce.trustAsHtml('&diamonds;')
+        }];
+        $scope.otherProbs = {
+          key1: {
+            p: 3
+          },
+          key2: {
+            p: 5
+          },
+          key4: {
+            p: 6
+          }
+        };
+      });
   </script>
 
 </body>

diff --git a/dist/multirange-slider.css b/dist/multirange-slider.css
@@ -6,17 +6,15 @@
 
 .at-multirange-slider .slider {
   height: 2px;
-  background: gray;
-
 }
 
 .at-multirange-slider .slider-range {
+
   box-sizing: border-box;
   display: inline-block;
+
   vertical-align: top;
-  height: 4px;
-  background: rgba(0,128,255,.5);
-  border-left: 5px solid blue;
+  height: 2px;
 }
 
 .at-multirange-slider .slider-handle {
@@ -28,6 +26,13 @@
   background: #fff;
   cursor: pointer;
 }
+
 .at-multirange-slider .slider-handle:hover {
   background: #ddd;
 }
+
+.at-multirange-slider .slider-label {
+  text-align: center;
+  padding-top: .25em;
+  font-size: .75em;
+}
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "angular-multirange-slider",
   "description": "A multi-range slider directive for AngularJS",
   "repository": "https://github.com/anandthakker/angular-multirange-slider",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "dependencies": {
   },
   "devDependencies": {

diff --git a/src/example.html b/src/example.html
@@ -5,6 +5,13 @@
   <meta charset="UTF-8">
   <title>AngularJS responsive multi-range slider - CodePen</title>
   <link rel="stylesheet" href="multirange-slider.css" media="screen" type="text/css" />
+  <style>
+
+  .slider {
+    background: #022;
+  }
+
+  </style>
 </head>
 
 <body>
@@ -15,25 +22,29 @@ <h1>AngularJS Responsive Multi-range slider</h1>
     <div ng-controller="Ctrl" style="width: 50%;">
 
       <h2>Here's one with a map.</h2>
-      <p>
-        model: {{otherProbs}}
-      </p>
-      <input type='text' ng-model='val.p' ng-repeat='(key, val) in otherProbs'>
       <slider>
         <slider-range model="val.p" ng-repeat="(key,val) in otherProbs">
           <div class="slider-handle">&larr;&rarr;</div>
         </slider-range>
       </slider>
+      <input type='text' ng-model='val.p' ng-repeat='(key, val) in otherProbs'>
+      <p>
+        model: {{otherProbs}}
+      </p>
 
-<!--       <h2>Here's one with an array of objects and a setp size.</h2>
-<p>
-  model: {{probs}}
-  <br>property: "p"
-  <br>step: .05
-</p>
-<input type='text' ng-model='val.p' ng-repeat='val in probs'>
-<slider model="val.p for val in probs" step=".05"></slider>
- -->
+      <h2>Here's one with an array of objects, a step size, and some playing cards.</h2>
+      <slider step=".05">
+        <slider-range model="val.p" ng-repeat="val in probs">
+          <div class="slider-handle" ng-bind-html="val.symbol"></div>
+          <div class="slider-label">{{val.p | number:2 }}</div>
+        </slider-range>
+      </slider>
+      <input type='text' ng-model='val.p' ng-repeat='val in probs'>
+      <p>
+        model: {{probs}}
+        <br>property: "p"
+        <br>step: .05
+      </p>
     </div>
 
   </div>
@@ -44,20 +55,29 @@ <h2>Here's one with a map.</h2>
 
   <script type="text/javascript">
     angular.module("at.multirange-slider.example", ['at.multirange-slider'])
-    .controller("Ctrl", function($scope) {
-      $scope.probs = [{
-        p: 0.1
-      }, {
-        p: 0.5
-      }, {
-        p: 0.4
-      }];
-      $scope.otherProbs = {
-        key1: {p: 3},
-        key2: {p: 5},
-        key4: {p: 6}
-      };
-    });
+      .controller("Ctrl", function($scope, $sce) {
+        $scope.probs = [{
+          p: 0.1,
+          symbol: $sce.trustAsHtml('&hearts;')
+        }, {
+          p: 0.5,
+          symbol: $sce.trustAsHtml('&spades;')
+        }, {
+          p: 0.4,
+          symbol: $sce.trustAsHtml('&diamonds;')
+        }];
+        $scope.otherProbs = {
+          key1: {
+            p: 3
+          },
+          key2: {
+            p: 5
+          },
+          key4: {
+            p: 6
+          }
+        };
+      });
   </script>
 
 </body>

diff --git a/src/multirange-slider.css b/src/multirange-slider.css
@@ -6,17 +6,15 @@
 
 .at-multirange-slider .slider {
   height: 2px;
-  background: gray;
-
 }
 
 .at-multirange-slider .slider-range {
+
   box-sizing: border-box;
   display: inline-block;
+
   vertical-align: top;
-  height: 4px;
-  background: rgba(0,128,255,.5);
-  border-left: 5px solid blue;
+  height: 2px;
 }
 
 .at-multirange-slider .slider-handle {
@@ -28,6 +26,13 @@
   background: #fff;
   cursor: pointer;
 }
+
 .at-multirange-slider .slider-handle:hover {
   background: #ddd;
 }
+
+.at-multirange-slider .slider-label {
+  text-align: center;
+  padding-top: .25em;
+  font-size: .75em;
+}