Added exact positioning of ticks, by using absolute position on them

Author: tefdos

bower.json

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

dist/rzslider.css

@@ -1,7 +1,7 @@
 /*! angularjs-slider - v5.4.3 - 
  (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-09-01 */
+ 2016-09-08 */
 .rzslider {
   position: relative;
   display: inline-block;
@@ -145,6 +145,7 @@
 }
 
 .rzslider .rz-ticks .rz-tick {
+  position: absolute;
   width: 10px;
   height: 10px;
   text-align: center;

dist/rzslider.js

@@ -1,7 +1,7 @@
 /*! angularjs-slider - v5.4.3 - 
  (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-09-01 */
+ 2016-09-08 */
 /*jslint unparam: true */
 /*global angular: false, console: false, define, module */
 (function(root, factory) {
@@ -74,7 +74,8 @@
       customTemplateScope: null,
       // CUSTOM CHANGES
       disableBarClick: false,
-      doubleSlider: false
+      doubleSlider: false,
+      ticksPadding: 0 // wrapper element padding to position the ticks appropriately
     };
     var globalOptions = {};
 
@@ -944,6 +945,7 @@
               'background-color': this.getTickColor(value)
             }
           }
+          tick.style['left'] = this.valueToOffset(value) + this.options.ticksPadding + 'px';
           if (this.options.ticksTooltip) {
             tick.tooltip = this.options.ticksTooltip(value);
             tick.tooltipPlacement = this.options.vertical ? 'right' : 'top';
@@ -1920,7 +1922,7 @@
           if(newMinValue < this.options.minLimit) newMinValue = this.options.minLimit;
           if(newMaxValue > this.options.maxLimit) newMaxValue = this.options.maxLimit;
         }
-        
+
         this.positionTrackingBar(newMinValue, newMaxValue);
       },
 

dist/rzslider.min.css

@@ -78,7 +78,8 @@
       customTemplateScope: null,
       // CUSTOM CHANGES
       disableBarClick: false,
-      doubleSlider: false
+      doubleSlider: false,
+      ticksPadding: 0 // wrapper element padding to position the ticks appropriately
     };
     var globalOptions = {};
 
@@ -948,6 +949,7 @@
               'background-color': this.getTickColor(value)
             }
           }
+          tick.style['left'] = this.valueToOffset(value) + this.options.ticksPadding + 'px';
           if (this.options.ticksTooltip) {
             tick.tooltip = this.options.ticksTooltip(value);
             tick.tooltipPlacement = this.options.vertical ? 'right' : 'top';
@@ -1924,7 +1926,7 @@
           if(newMinValue < this.options.minLimit) newMinValue = this.options.minLimit;
           if(newMaxValue > this.options.maxLimit) newMaxValue = this.options.maxLimit;
         }
-        
+
         this.positionTrackingBar(newMinValue, newMaxValue);
       },
 

dist/rzslider.min.js

@@ -144,6 +144,7 @@
       height: @ticksHeight;
       background: @ticksColor;
       border-radius: 50%;
+      position: absolute;
       &.rz-selected {
         background: @selectedTicksColor;
       }