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.
Here is the updated jsfiddle http://jsfiddle.net/cwhgLcjv/2682/