Update demo site for 1.7.0

demo.js

 var app = angular.module('rzSliderDemo', ['rzModule', 'ui.bootstrap', 'hljs']);
 
-app.directive('showCode', function () {
+app.directive('showCode', function() {
   return {
     scope: {
       jsFile: '@',
@@ -10,7 +10,7 @@ app.directive('showCode', function () {
   };
 });
 
-app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
+app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
   //Minimal slider config
   $scope.minSlider = {
     value: 10
@@ -58,12 +58,32 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
     }
   };
 
+  //Slider with selection bar at the end
+  $scope.slider_visible_bar_end = {
+    value: 5,
+    options: {
+      floor: 0,
+      ceil: 10,
+      showSelectionBarEnd: true
+    }
+  };
+
+  //Slider with selection bar from a value
+  $scope.slider_visible_bar_from_value = {
+    value: 5,
+    options: {
+      floor: -10,
+      ceil: 10,
+      showSelectionBarFromValue: 0
+    }
+  };
+
   //Slider with selection bar
   $scope.color_slider_bar = {
     value: 12,
     options: {
       showSelectionBar: true,
-      getSelectionBarColor: function (value) {
+      getSelectionBarColor: function(value) {
         if (value <= 3)
           return 'red';
         if (value <= 6)
@@ -85,17 +105,28 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
     }
   };
 
+  //Slider config with floating values
+  $scope.slider_float = {
+    value: 0.5,
+    options: {
+      floor: 0,
+      ceil: 2,
+      step: 0.1,
+      precision: 1
+    }
+  };
+
   //Slider config with callbacks
   $scope.slider_callbacks = {
     value: 100,
     options: {
-      onStart: function () {
+      onStart: function() {
         $scope.otherData.start = $scope.slider_callbacks.value * 10;
       },
-      onChange: function () {
+      onChange: function() {
         $scope.otherData.change = $scope.slider_callbacks.value * 10;
       },
-      onEnd: function () {
+      onEnd: function() {
         $scope.otherData.end = $scope.slider_callbacks.value * 10;
       }
     }
@@ -113,12 +144,32 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
     options: {
       floor: 0,
       ceil: 500,
-      translate: function (value) {
+      translate: function(value) {
         return '$' + value;
       }
     }
   };
 
+  //Slider config with custom display function using html formatting
+  $scope.slider_translate_html = {
+    minValue: 100,
+    maxValue: 400,
+    options: {
+      floor: 0,
+      ceil: 500,
+      translate: function(value, sliderId, label) {
+        switch (label) {
+          case 'model':
+            return '<b>Min price:</b> $' + value;
+          case 'high':
+            return '<b>Max price:</b> $' + value;
+          default:
+            return '$' + value
+        }
+      }
+    }
+  };
+
   //Slider config with steps array of letters
   $scope.slider_alphabet = {
     value: 0,
@@ -144,7 +195,7 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
       floor: 0,
       ceil: 10,
       showTicks: true,
-      ticksTooltip: function (v) {
+      ticksTooltip: function(v) {
         return 'Tooltip for ' + v;
       }
     }
@@ -157,7 +208,7 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
       floor: 0,
       ceil: 10,
       showTicksValues: true,
-      ticksValuesTooltip: function (v) {
+      ticksValuesTooltip: function(v) {
         return 'Tooltip for ' + v;
       }
     }
@@ -250,7 +301,7 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
       vertical: true,
       showSelectionBar: true,
       showTicksValues: true,
-      ticksValuesTooltip: function (v) {
+      ticksValuesTooltip: function(v) {
         return 'Tooltip for ' + v;
       }
     }
@@ -285,9 +336,9 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
       ceil: 10
     }
   };
-  $scope.toggle = function () {
+  $scope.toggle = function() {
     $scope.visible = !$scope.visible;
-    $timeout(function () {
+    $timeout(function() {
       $scope.$broadcast('rzSliderForceRender');
     });
   };
@@ -302,14 +353,14 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
       high: 50
     }
   };
-  $scope.openModal = function () {
+  $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.
 
 
-        var formatToPercentage = function (value) {
+        var formatToPercentage = function(value) {
           return value + '%';
         };
 
@@ -324,23 +375,23 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
           ceil: 100,
           translate: formatToPercentage
         };
-        $scope.ok = function () {
+        $scope.ok = function() {
           $modalInstance.close($scope.percentages);
         };
-        $scope.cancel = function () {
+        $scope.cancel = function() {
           $modalInstance.dismiss();
         };
       },
       resolve: {
-        values: function () {
+        values: function() {
           return $scope.percentages;
         }
       }
     });
-    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.
     });
   };
@@ -355,8 +406,8 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
       value: 200
     }
   };
-  $scope.refreshSlider = function () {
-    $timeout(function () {
+  $scope.refreshSlider = function() {
+    $timeout(function() {
       $scope.$broadcast('rzSliderForceRender');
     });
   };
@@ -379,7 +430,7 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
       showTicksValues: false
     }
   };
-  $scope.toggleHighValue = function () {
+  $scope.toggleHighValue = function() {
     if ($scope.slider_all_options.maxValue != null) {
       $scope.slider_all_options.maxValue = undefined;
     } else {

index.html

@@ -90,6 +90,24 @@
     <show-code js-file="slider_visible_bar" html-file="singleSlider"></show-code>
   </article>
 
+  <article>
+    <h2>Slider with visible selection bar at the end</h2>
+    <rzslider
+      rz-slider-model="slider_visible_bar_end.value"
+      rz-slider-options="slider_visible_bar_end.options"
+    ></rzslider>
+    <show-code js-file="slider_visible_bar_end" html-file="singleSlider"></show-code>
+  </article>
+
+  <article>
+    <h2>Slider with visible selection bar from a value</h2>
+    <rzslider
+      rz-slider-model="slider_visible_bar_from_value.value"
+      rz-slider-options="slider_visible_bar_from_value.options"
+    ></rzslider>
+    <show-code js-file="slider_visible_bar_from_value" html-file="singleSlider"></show-code>
+  </article>
+
   <article>
     <h2>Slider with dynamic selection bar colors</h2>
     <rzslider
@@ -108,6 +126,15 @@
     <show-code js-file="slider_floor_ceil" html-file="singleSlider"></show-code>
   </article>
 
+  <article>
+    <h2>Slider with floating values</h2>
+    <rzslider
+      rz-slider-model="slider_float.value"
+      rz-slider-options="slider_float.options"
+    ></rzslider>
+    <show-code js-file="slider_float" html-file="singleSlider"></show-code>
+  </article>
+
   <article>
     <h2>Slider with callbacks on start, change and end</h2>
     <p>Value linked on start: {{ otherData.start }}</p>
@@ -131,6 +158,16 @@
     <show-code js-file="slider_translate" html-file="rangeSlider"></show-code>
   </article>
 
+  <article>
+    <h2>Slider with custom display function using html formatting</h2>
+    <rzslider
+      rz-slider-model="slider_translate_html.minValue"
+      rz-slider-high="slider_translate_html.maxValue"
+      rz-slider-options="slider_translate_html.options"
+    ></rzslider>
+    <show-code js-file="slider_translate_html" html-file="rangeSlider"></show-code>
+  </article>
+
   <article>
     <h2>Slider with Alphabet</h2>
     <rzslider
@@ -270,13 +307,13 @@
 
     <tabset class="code">
       <tab heading="HTML">
-        <div hljs hljs-include="'snippets/slider_modal.html'"  hljs-language="html"></div>
+        <div hljs hljs-include="'snippets/slider_modal.html'" hljs-language="html"></div>
       </tab>
       <tab heading="JS">
-        <div hljs hljs-include="'snippets/slider_modal.js'"  hljs-language="js"></div>
+        <div hljs hljs-include="'snippets/slider_modal.js'" hljs-language="js"></div>
       </tab>
       <tab heading="sliderModal.html">
-        <div hljs hljs-include="'sliderModal.html'"  hljs-language="html"></div>
+        <div hljs hljs-include="'sliderModal.html'" hljs-language="html"></div>
       </tab>
     </tabset>
   </article>
@@ -340,6 +377,6 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
 <script src="lib/highlight.min.js"></script>
 <script src="lib/angular-highlightjs.min.js"></script>
-<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.min.js"></script>
+<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script>
 <script src="demo.js"></script>
 </html>

snippets/slider_float.js

+$scope.slider = {
+  value: 0.5,
+  options: {
+    floor: 0,
+    ceil: 2,
+    step: 0.1,
+    precision: 1
+  }
+};

snippets/slider_translate_html.js

+$scope.slider = {
+  minValue: 100,
+  maxValue: 400,
+  options: {
+    floor: 0,
+    ceil: 500,
+    translate: function(value, sliderId, label) {
+      switch (label) {
+        case 'model':
+          return '<b>Min price:</b> $' + value;
+        case 'high':
+          return '<b>Max price:</b> $' + value;
+        default:
+          return '$' + value
+      }
+    }
+  }
+};

snippets/slider_visible_bar_end.js

+$scope.slider = {
+  value: 5,
+  options: {
+    floor: 0,
+    ceil: 10,
+    showSelectionBarEnd: true
+  }
+};

snippets/slider_visible_bar_from_value.js

+$scope.slider = {
+  value: 5,
+  options: {
+    floor: -10,
+    ceil: 10,
+    showSelectionBarFromValue: 0
+  }
+};