AngularJS-Slider Issue Report

Fork this Fiddle to show an issue and report it here: https://github.com/rzajac/angularjs-slider/issues

HTML

<link rel="stylesheet" href="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script>
<div ng-app="myapp">
    <div ng-controller="TestController as vm">
        <p>Price: {{vm.priceSlider.value}}</p>
        <rzslider class="custom-slider" rz-slider-model="vm.priceSlider.min" rz-slider-options="vm.priceSlider.options" rz-slider-high="vm.priceSlider.high"></rzslider>
    </div>
</div>

CSS

.custom-slider.rzslider .rz-bar {
  background: #ffe4d1;
  height: 2px;
}
.custom-slider.rzslider .rz-selection {
  background: orange;
}

.custom-slider.rzslider .rz-pointer {
  width: 8px;
  height: 16px;
  top: auto; /* to remove the default positioning */
  bottom: 0;
  background-color: #333;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.custom-slider.rzslider .rz-pointer:after {
  display: none;
}

.custom-slider.rzslider .rz-bubble {
  bottom: 14px;
}

.custom-slider.rzslider .rz-limit {
  font-weight: bold;
  color: orange;
}

.custom-slider.rzslider .rz-tick {
  width: 1px;
  height: 10px;
  margin-left: 4px;
  border-radius: 0;
  background: #ffe4d1;
  top: -1px;
}

.custom-slider.rzslider .rz-tick.rz-selected {
  background: orange;
}

JavaScript

var myApp = angular.module('myapp', ['rzModule']);

myApp.controller('TestController', TestController);

function TestController() {
    var vm = this;
    var ticksArray = [0, 3, 6, 12, 18, 24, 36, 48, 60, 72, 84, 120, 240, 360, 600, 1200, 3600];
    var rangeDiff = [1, 3, 3, 6, 6, 6, 12, 12, 12, 12, 12, 36, 120, 120, 240, 600, 1400];
    var ticksPositions = [];
    function calculateTicksPositions() {
    	ticksArray.forEach((tick, index) => {
      	ticksPositions[tick] = 1/16 * index;
      });
      console.log("ticksPositions.length"  + ticksPositions.length);
    }
    
    calculateTicksPositions();
    
    function calculateValuePosition(value) {    
      var rangeMin;
      var rangeMax;
    	for(var i = 0; i <= ticksArray.length; i++){
      	rangeMin = ticksArray[i];
      	rangeMax = ticksArray[i + 1];
      	if(value >= rangeMin && value <= rangeMax)
        	break;
      }
      
      const pos = ticksPositions[rangeMax] - (((rangeMax - value)/(rangeMax - rangeMin)) * (ticksPositions[rangeMax] - ticksPositions[rangeMin]));
      
      console.log("=>" + value + ", " + rangeMin + ", " + rangeMax + "," + pos );
      
      return pos;
    	
    }
    
    vm.priceSlider = {
        min: 0,
        high: 10,
        options: {
          floor: 0,
          ceil: 3600,
          showTicksValues: true,
          step: 1,
          ticksArray: ticksArray,
          customValueToPosition: function(val, minVal, maxVal) {
            /*var pos =  1/16 * (ticksArray.indexOf(val));
            if (positions.indexOf(pos) === -1){
            	positions.push(pos);
            }*/
            if(!ticksPositions[val]){
            	console.log("value => " + val);
            	ticksPositions[val] = calculateValuePosition(val);
            }
            return ticksPositions[val];
          },
          customPositionToValue: function(percent, minVal, maxVal) {
              var minPos;
              var maxPos;
              
          	var index =...