Incorrect value displayed.

[AdrianPantea]

I have the slider set for a low of 0 and high of 5000. When I set the value to 1999 it displays 2000. Is there a way to fix this? Setting other values seems to round off as well.
We always need to display correct value regardless of low and high limits

[darul75]

Hi can you put your options and default value i check then

[AdrianPantea]

Thanks for the quick reply.
Fiddle here: https://jsfiddle.net/bj0zc6Lx/2/
I set the range from 1 to 5000 and set model value to 1999 but value 2001 is displayed in slider. If you set the value to 1998, 1997, 1996, etc.... you start to see the slider seems to skip every 4 or 5 steps. Feels like some type of rounding performed on displayed value based on range. If the range is between 1 and 100 I cannot replicate this

[darul75]

problem is due to values that are then transformed into percentage positions, and pixel is a pixel so at the end you loose precision if too much points...5000 on 200px width difficult by instance, can you increase step gap ?

[AdrianPantea]

That worked in terms of displaying the correct current value in the slider label if the value is somewhere in the middle between the low and high. Thanks
I changed the step to be equal to the current value. (refer to https://jsfiddle.net/bj0zc6Lx/4/)
Doing this removed the ability to slide correctly since the step value is potentially very large. WE ARE OK with that.
Our client need to specify values between 0 and 5000....so we are only using the slider for display purposes, not to allow a client to slide from 0 to 5000.

Now, our problem is that the slider does not display low values correctly.
https://jsfiddle.net/bj0zc6Lx/5/
In this fiddle we are setting the value to 1 but the slider displays 0.

[darul75]

sorry I hadn't see your reply, if it is only for display purpose I can do a trick for to show correct value not rounded.
then your sample with step of current value is weird, a step of 100 won't be fine for the client ?

[shainegordon]

npm version: "angular-awesome-slider": "2.4.4"

I had the same issue, I had to initialize the slider to a specific value, and let the user change it which would update the model accordingly. The rounding was causing a problem as the real value was being updated incorrectly.

I ended up with this "hack". This seems to fix the issue with no side-effects for our use case:

export const redefineSliderRounding = (Slider) => {
    Slider.prototype.limits = function( x, pointer ){
        // smooth
        if(!this.settings.smooth){
            var step = this.settings.step*100 / ( this.settings.interval );
            //x = Math.round( x/step ) * step;
        }

        if (pointer) {
            var another = this.o.pointers[1-pointer.uid];
            if(another && pointer.uid && x < another.value.prc) x = another.value.prc;
            if(another && !pointer.uid && x > another.value.prc) x = another.value.prc;
        }
        // base limit
        if(x < 0) x = 0;
        if(x > 100) x = 100;

        return x;//Math.round(x*10) / 10;
    };
};

//component's controller ES6 class constructor
/*@ngInject*/
constructor($scope, slider) {
        redefineSliderRounding(slider);
        this.$scope = $scope;
}