I am trying to use angularjs slider with for range selection and custom scaling.
Here is the slider option object...
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/
The issues I am facing are
1) The slider pointer is not visible for in between values excluding ticks
2) Not able to select the range properly
Apologies for bad formatting if any..
For this to work we need to have customValueToPosition and customPositionToValue to be implemented properly for custom scaling.
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);
}
Here is the updated jsfiddle http://jsfiddle.net/cwhgLcjv/2682/