Programmatic value changes - demo not working correctly about rangeslider.js HOT 6 CLOSED

It seems that it's not just the demo, your calculations are slightly wrong, depending on the min and max value, some values can't be set. For example if I on the input element have values min=1 max=50 I can't set value 20 on that element, it jumps on 21.

if min=1 and max=100 then I can't set the slider to value 21 it jumps to 22
It appears that your calculation doesn't properly accounts for the min value.

from rangeslider.js.

First of all, thanks for this plugin. But I'm having this issue as well. I have + and - buttons that move the slider incrementally.When hitting the - button to decrease the value, it gets hung up at certain points. When I hit the + button to increase the value, it skips some numbers. My slider from 0 to 243 gets hung up around the following numbers 14, 27, 53, 62, 104, 106, 123, 206, 208, 210

from rangeslider.js.

I ran into this issue as well. I modified Plugin.prototype.getValueFromPosition function (~ line 252) by removing the call to Math.ceil().

//Original Code
value = this.step * Math.ceil((((percentage) * (this.max - this.min)) + this.min) / this.step);

//Modified Code
value = this.step * ((((percentage) * (this.max - this.min)) + this.min) / this.step);

In some cases a number just larger than the desired position was being computed and ceiling was doing what it does best and rounding to that larger number. Mine also hung up and I believe it was due to a feedback loop in value setting. My input was setting the slider and the slider was setting the input, thus giving the impression of being 'stuck'. This solution is working great for me!

from rangeslider.js.

Great find, pilcherb. I implemented your code into my local copy and it worked great. Didn't get suck at all. There was one thing still happening though.

As I move the slider, I have a number input field that displays the slider value. if I removed Math.ceil() it displayed decimal numbers as I drag the slider, instead of adhering to my step value of 1. But as soon as I released the mouse, it rounded the displayed number to a whole number, properly adhering to my step value.

Thanks to you finding the code that controls the value, I was able to experiment more. Instead of removing Math.ceil(), I replaced it with Math.round() and it seemed to fix both problems. The slider wouldn't get stuck or skip and the input would only display whole numbers as I drag the slider. I also experimented with changing my step value to 0.25 and it still always displayed the proper step value as the slider was moved. I have only tested this in Chrome.

// new proposed code
value = this.step * Math.round((((percentage) * (this.max - this.min)) + this.min) / this.step);

from rangeslider.js.

Excellent change, I'm glad this worked for you as well!

from rangeslider.js.

#95 should fix this issue. It will be in the next release (0.3.5).

from rangeslider.js.