Angularjs 滑块、customValueToPosition 无法使用范围选择
Angularjs slider, customValueToPosition not able work with range selection
我正在尝试将 angularjs 滑块用于范围 selection 和自定义缩放。
这是滑块选项对象...
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) 无法 select 范围正确
如有格式错误,请见谅..
为此,我们需要正确实施 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/
我正在尝试将 angularjs 滑块用于范围 selection 和自定义缩放。
这是滑块选项对象...
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) 无法 select 范围正确
如有格式错误,请见谅..
为此,我们需要正确实施 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/