Invert horizontal AngularJS Slider Custom Scale

Question

I'm using this AngularJS Slider, the horizontal one. I took the example that has the points divided by a different distance. That example, started from a wide distance, to end with a small distance:

What I wanted to do, is to invert the scale keeping the numbering. This is my code: JSFIDDLE

As you can see, I changed the function customValueToPosition:

customValueToPosition: function(val, minVal, maxVal) {
  val = Math.sqrt(val);
  minVal = Math.sqrt(minVal);
  maxVal = Math.sqrt(maxVal);
  var range = minVal - maxVal;
  return (val - maxVal) / range;      
}

There are two problems: The numbers are inverted. I would like to leave from 0 instead of starting 5. Then there is a problem with the click of the first and the last value. If you click slightly before the first element (or just after the last item), the selection falls on the opposite value. So, if I just click just before the first element first, select the last one. And viceversa.

Answer 1

EDIT:I think this is what you are looking for. The old one was x^2 scale so in order to make it looks like this we need to change both functions and in customPositionToValue return square root instead of power of 2, and in customValueToPosition we need to use power of 2 to calculate range and return procentage that describes position of the point.

app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
        $scope.minSlider = {
            value: 2
        };
        $scope.slider = {
            options: {
            floor: 0,
            ceil: 5,
            step: 1,
            showTicksValues: true,
            customValueToPosition: function(val, minVal, maxVal) {
                val = Math.pow(val,2)
                maxVal = Math.pow(maxVal, 2)
                minVal = Math.pow(minVal, 2)
                var range = maxVal - minVal
                return (val - minVal) / range
            },
            customPositionToValue: function(percent, minVal, maxVal) {
                minVal = Math.pow(minVal,2);
                maxVal = Math.pow(maxVal,2);
                var value = percent * (maxVal - minVal) + minVal;
                return Math.sqrt(value)
            }
            }
        };
});

Hope it helps.

Here is working plunker