Search code examples
angularjsangularjs-3rd-partyangularjs-slider

Angularjs slider, customValueToPosition not able work with range selection


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..


Solution

  • 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/