Add display-filter property to allow for $filter expression on values…

… / floor / ceiling.

Added display-filter example.

README.md

@@ -55,6 +55,7 @@ Controller scope for sliders:
 * __ceiling__ `{number}` Maximum Value for Slider
 * __step__ `{number}` Value between steps in snapping on the scale. Examples (100, 10, 1, .1}
 * __precision__ `{number / integer}` The precision to which round each step is rounded to. Default: 2
+* __display-filter__ `{$filter}` Optional angular filter expression.
 * __ng-model__ `{object}` Bound values for sliders, requires 'value' for slider and 'title' for bubble
 * __bubbles__ `{string}` true or false for showing the persistent bubbles or false for just on hover
 
@@ -86,7 +87,7 @@ This optional directive will create a key for the slider. Similar to __multi-sli
 * ~~Handle overlapping tooltips by checking handle proximity~~
 * ~~A key directive~~
 * ~~Bind / Watch to Ceiling & Floor for adjusting endpoints~~
-* Add filter to directive property for possible dates / object filter
+* ~~Add filter to directive property for possible dates / angular filter~~
 * Minify src -> dist folders
 * Tests
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-multi-slider",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "authors": [
     "Keith <[email protected]>",
     "Tori Holmes-Kirk <https://github.com/supertorio>"

demo/app.js

@@ -37,6 +37,17 @@ angular.module('multiSliderDemo')
       {value: 100, title: 'Proposal drafting: ', component: 'Proposal Making'}
     ];
 
+    // filter for dates
+    var today = new Date();
+    $scope.dateFloor = today.valueOf();
+    $scope.dateCeiling = new Date(today.getFullYear() + 1,today.getMonth(),today.getDate()).valueOf();
+
+    $scope.dateSliders = angular.copy($scope.tabSliders);
+
+    angular.forEach($scope.dateSliders,function(slider){
+      slider.value = $scope.dateFloor + (slider.value * 86400000); //milliseconds in a day
+    });
+
     $scope.openModal = function() {
       var modalDlg = $uibModal.open({
         templateUrl: 'sliderModal.html',

demo/index.html

@@ -123,7 +123,7 @@ <h2>Adjusting Floor / Ceiling end points of Slider after rendered</h2>
 
         <section class="col-sm-4">
         <pre>
-          {{ sliders | json}}
+          {{ tabSliders | json}}
         </pre>
         </section>
         <section class="col-sm-6 padding-10">
@@ -147,6 +147,38 @@ <h2>Adjusting Floor / Ceiling end points of Slider after rendered</h2>
       </fieldset>
     </form>
   </article>
+  <article>
+    <h2>Date Filter Values and End Points of Multiple Slider</h2>
+    <form name="ceilingForm" id="dateForm" novalidate autocomplete="off">
+      <fieldset class="row">
+        <section class="col-sm-4">
+        <pre>
+          {{ dateSliders | json}}
+        </pre>
+        </section>
+        <section class="col-sm-6 padding-10">
+          <multi-slider name="dateSlider"
+                        floor="{{dateFloor}}"
+                        step="86400000"
+                        precision="2"
+                        ceiling="{{dateCeiling}}"
+                        bubbles="true"
+                        display-filter="date : 'shortDate'"
+                        reletiveValues="true"
+                        ng-model="dateSliders"
+                        style="margin-top:200px">
+          </multi-slider>
+          <multi-slider-key ng-model="dateSliders" display-filter="date : 'shortDate'"></multi-slider-key>
+          <section class="col-sm-12">
+            <label class="btn btn-primary" ng-model="floor" uib-btn-radio="0">floor 0</label>
+            <label class="btn btn-primary" ng-model="floor" uib-btn-radio="50">floor 50</label>
+            <label class="btn btn-primary" ng-model="ceiling" uib-btn-radio="100">Ceiling 100</label>
+            <label class="btn btn-primary" ng-model="ceiling" uib-btn-radio="365">Ceiling 365</label>
+          </section>
+        </section>
+      </fieldset>
+    </form>
+  </article>
 
 </div>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>

multislider.js

@@ -6,13 +6,17 @@ angular.module('angularMultiSlider', [])
       restrict: 'EA',
       transclude: true,
       scope: {
+        displayFilter: '@',
         sliders : '=ngModel'
       },
       link: function(scope, element) {
         var sliderStr = '';
+        if (scope.displayFilter === undefined) scope.displayFilter = '';
+        var filterExpression = scope.displayFilter ===  '' ? '' : ' | ' + scope.displayFilter;
+
         angular.forEach(scope.sliders, function(slider, key){
           var colorKey = slider.color ? '<span style="background-color:' + slider.color + ';"></span> ' : '';
-          sliderStr += '<div class="key">' + colorKey + '{{ sliders[' + key.toString() + '].title }} <strong>{{ sliders[' + key.toString() + '].value}}</strong></div>';
+          sliderStr += '<div class="key">' + colorKey + '{{ sliders[' + key.toString() + '].title }} <strong>{{ sliders[' + key.toString() + '].value ' + filterExpression + '}}</strong></div>';
         });
 
         var sliderControls = angular.element('<div class="angular-multi-slider-key">' + sliderStr + '</div>');
@@ -21,7 +25,7 @@ angular.module('angularMultiSlider', [])
       }
     }
   })
-  .directive('multiSlider', function($compile) {
+  .directive('multiSlider', function($compile, $filter) {
     var events = {
       mouse: {
         start: 'mousedown',
@@ -75,17 +79,16 @@ angular.module('angularMultiSlider', [])
       restrict: 'EA',
       require: '?ngModel',
       scope: {
-        floor       : '@',
-        ceiling     : '@',
-        step        : '@',
-        precision   : '@',
-        bubbles     : '@',
-        sliders     : '=ngModel'
+        floor: '@',
+        ceiling: '@',
+        step: '@',
+        precision: '@',
+        bubbles: '@',
+        displayFilter: '@',
+        sliders: '=ngModel'
       },
       template :
-      '<div class="bar"></div>' +
-      '<div class="limit floor">{{ floor }}</div>' +
-      '<div class="limit ceiling">{{ ceiling }}</div>',
+      '<div class="bar"></div>',
 
       link : function(scope, element, attrs, ngModel) {
         if (!ngModel) return; // do nothing if no ng-model
@@ -100,9 +103,13 @@ angular.module('angularMultiSlider', [])
         element.addClass('angular-multi-slider');
 
         // DOM Components
-        var sliderStr = '';
+        if (scope.displayFilter === undefined) scope.displayFilter = '';
+        var filterExpression = scope.displayFilter ===  '' ? '' : ' | ' + scope.displayFilter;
+
+        var sliderStr = '<div class="limit floor">{{ floor ' + filterExpression + ' }}</div>' +
+                        '<div class="limit ceiling">{{ ceiling ' + filterExpression + '}}</div>';
         angular.forEach(scope.sliders, function(slider, key){
-          sliderStr += '<div class="handle"></div><div class="bubble">{{ sliders[' + key.toString() + '].title }}{{ sliders[' + key.toString() + '].value}}</div>';
+          sliderStr += '<div class="handle"></div><div class="bubble">{{ sliders[' + key.toString() + '].title }}{{ sliders[' + key.toString() + '].value ' + filterExpression + ' }}</div>';
         });
         var sliderControls = angular.element(sliderStr);
         element.append(sliderControls);