Merge pull request #67 from tony0918/master

Added tick marks support for horizontal slider bar.

Author: PowerKiKi

demo/css/slider.css

@@ -0,0 +1,7 @@
+.ui-slider-tick {
+  position: absolute;
+  background-color: #aaa;
+  width: 2px;
+  height: 8px;
+  top: 16px;
+}

demo/demo.html

@@ -5,7 +5,8 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 	<title>AngularUI - Slider demo</title>
 	<base href=".."></base>
-  	<link rel="stylesheet" href="bower_components/jquery-ui/themes/smoothness/jquery-ui.css">
+	<link rel="stylesheet" href="bower_components/jquery-ui/themes/smoothness/jquery-ui.css">
+	<link rel="stylesheet" href="demo/css/slider.css">
 	<style>
 		body {
 			padding: 2em;
@@ -188,10 +189,16 @@ <h1>AngularUI Slider demo</h1>
 </pre>	
 	</div>	
 	</li>
+		<li>
+			<div class="sliderExample"><a name="ex13"></a>
+				<strong>Slider with tick marks. Support horizontal slider bar so far. 'tick' and 'step' attributes are required.</strong>
+				<div ui-slider data-min="0" data-max="20" data-step="5" data-tick ng-model="demoVals.sliderExample13"></div>
+			</div>
+		</li>
 	</ol>
-	<script type="text/javascript" src="bower_components/jquery/jquery.min.js"></script>
-  	<script type="text/javascript" src="bower_components/jquery-ui/ui/minified/jquery-ui.min.js"></script>
-  	<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>	
+	<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
+	<script type="text/javascript" src="bower_components/jquery-ui/ui/minified/jquery-ui.min.js"></script>
+	<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
 	<script type="text/javascript" src="src/slider.js"></script>	
 	<script>
 		var app = angular.module('sliderDemoApp', ['ui.slider']);

src/slider.js

@@ -5,8 +5,8 @@ angular.module('ui.slider', []).value('uiSliderConfig',{}).directive('uiSlider',
     uiSliderConfig = uiSliderConfig || {};
     return {
         require: 'ngModel',
-        compile: function () {
-            return function (scope, elm, attrs, ngModel) {
+        compile: function() {
+            var preLink = function (scope, elm, attrs, ngModel) {
 
                 function parseNumber(n, decimals) {
                     return (decimals) ? parseFloat(n) : parseInt(n, 10);
@@ -135,6 +135,30 @@ angular.module('ui.slider', []).value('uiSliderConfig',{}).directive('uiSlider',
                     destroy();
                 });
             };
+
+            var postLink = function (scope, element, attrs, ngModel) {
+                // Add tick marks if 'tick' and 'step' attributes have been setted on element.
+                // Support horizontal slider bar so far. 'tick' and 'step' attributes are required.
+                var options = angular.extend({}, scope.$eval(attrs.uiSlider));
+                var properties = ['max', 'step', 'tick'];
+                angular.forEach(properties, function(property) {
+                    if (angular.isDefined(attrs[property])) {
+                        options[property] = attrs[property];
+                    }
+                });
+                if (angular.isDefined(options['tick']) && angular.isDefined(options['step'])) {
+                    var total = parseInt(parseInt(options['max'])/parseInt(options['step']));
+                    for (var i = total; i >= 0; i--) {
+                        var left = ((i / total) * 100) + '%';
+                        $("<div/>").addClass("ui-slider-tick").appendTo(element).css({left: left});
+                    };
+                }
+            }
+
+            return {
+                pre: preLink,
+                post: postLink
+            };
         }
     };
 }]);