5.4.0 release

Author: Valentin Hervieu

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 5.4.0 (2016-07-13)
+## Features
+- Add function to customize color of ticks (#372).
+
 # 5.3.0 (2016-07-11)
 ## Features
 - Expose labels on scope in template (#358).

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angularjs-slider",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "homepage": "https://github.com/angular-slider/angularjs-slider",
   "authors": [
     "Rafal Zajac <[email protected]>",

demo/demo.js

@@ -127,6 +127,27 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     }
   };
 
+  //Slider with custom tick formatting
+  $scope.slider_tick_color = {
+    value: 0,
+    options: {
+      ceil: 1200,
+      floor: 0,
+      step: 50,
+      showSelectionBar: true,
+      showTicks: true,
+      getTickColor: function(value){
+        if (value < 300)
+          return 'red';
+        if (value < 600)
+          return 'orange';
+        if (value < 900)
+          return 'yellow';
+        return '#2AE02A';
+      }
+    }
+  };
+
   //Slider config with floor, ceil and step
   $scope.slider_floor_ceil = {
     value: 12,
@@ -333,24 +354,6 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     }
   };
 
-  //Slider with custom tick formating
-  $scope.slider_custom_tick_format = {
-    value: 30,
-    options: {
-      ceil: 1000,
-      floor: 0,
-      showSelectionBar: true,
-      showTicks: true,
-      getTickColor: function(value){
-        if(value > 100){
-          return 'red'; 
-        }
-        return 'blue';
-      }
-    }
-  };
-
-
   //Vertical sliders
   $scope.verticalSlider1 = {
     value: 0,

demo/index.html

@@ -111,6 +111,14 @@ <h2>Slider with dynamic pointer color</h2>
     ></rzslider>
   </article>
 
+  <article>
+    <h2>Slider with dynamic tick color</h2>
+    <rzslider
+      rz-slider-model="slider_tick_color.value"
+      rz-slider-options="slider_tick_color.options"
+    ></rzslider>
+  </article>
+
   <article>
     <h2>Slider with custom floor/ceil/step</h2>
     <rzslider
@@ -252,14 +260,6 @@ <h2>Slider with draggable range only</h2>
     ></rzslider>
   </article>
 
-  <article>
-    <h2>Slider with custom tick formatting</h2>
-    <rzslider
-      rz-slider-model="slider_custom_tick_format.value"
-      rz-slider-options="slider_custom_tick_format.options"
-    ></rzslider>
-  </article>
-
   <article>
     <h2>Vertical sliders</h2>
     <div class="row vertical-sliders" style="margin: 20px;">

dist/rzslider.css

@@ -1,7 +1,7 @@
-/*! angularjs-slider - v5.3.0 - 
+/*! angularjs-slider - v5.4.0 - 
  (c) Rafal Zajac <[email protected]>, Valentin Hervieu <[email protected]>, Jussi Saarivirta <[email protected]>, Angelin Sirbu <[email protected]> - 
  https://github.com/angular-slider/angularjs-slider - 
- 2016-07-12 */
+ 2016-07-13 */
 .rzslider {
   position: relative;
   display: inline-block;

dist/rzslider.js

@@ -1,7 +1,7 @@
-/*! angularjs-slider - v5.3.0 - 
+/*! angularjs-slider - v5.4.0 - 
  (c) Rafal Zajac <[email protected]>, Valentin Hervieu <[email protected]>, Jussi Saarivirta <[email protected]>, Angelin Sirbu <[email protected]> - 
  https://github.com/angular-slider/angularjs-slider - 
- 2016-07-12 */
+ 2016-07-13 */
 /*jslint unparam: true */
 /*global angular: false, console: false, define, module */
 (function(root, factory) {

dist/rzslider.min.css

@@ -1,6 +1,6 @@
 {
   "name": "angularjs-slider",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "description": "AngularJS slider directive with no external dependencies. Mobile friendly!.",
   "main": "dist/rzslider.js",
   "repository": {