panagulis72 panagulis72 - 6 months ago 38
AngularJS Question

Invert horizontal AngularJS Slider Custom Scale

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:
enter image description here

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: 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.
enter image description here

Answer Source

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.

enter image description here

Here is working plunker

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download