Angularjs 滑块，customValueToPosition 无法使用范围选择

Question

我正在尝试使用angularjs滑块进行范围选择和自定义缩放。

这是滑块选项对象...

vm.priceSlider = {  
min: 3,  
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);  
}  
return pos;  
},  
customPositionToValue: function(percent, minVal, maxVal) {  
var index = Math.round(percent * 16);  
var min = (ticksArray[index - 1]);  
var max = (ticksArray[index]);  
var minPos = positions[index -1];  
var maxPos = positions[index];  
var value = max - ((maxPos-percent)/(maxPos-minPos)) * (max - min);   
return Math.round(value);  
}  
}  
}    

JSFIDDLE http://jsfiddle.net/cwhgLcjv/2527/

我面临的
问题是 1( 滑块指针在值之间不可见，不包括刻度
2( 无法正确选择范围

对于格式错误(如果有的话(表示歉意。

Answer 1

为此，我们需要正确实现 customValueToPosition 和 customPositionToValue 以进行自定义缩放。

customValueToPosition: function(val, minVal, maxVal) {
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 = Math.round(percent * 16);
var min = (ticksArray[index - 1]);
var max = (ticksArray[index]);
minPos = ticksPositions[min];
maxPos = ticksPositions[max];            
var value = max - ((maxPos-percent)/(maxPos-minPos)) * (max - min); 
return Math.round(value);
}

这是更新的jsfiddle http://jsfiddle.net/cwhgLcjv/2682/