andreruffert / rangeslider.js

🎚 HTML5 input range slider element jQuery polyfill
https://rangeslider.js.org
MIT License
2.16k stars 398 forks source link

setPosition calls setValue incorrectly for small sizes. #243

Open WORMSS opened 7 years ago

WORMSS commented 7 years ago

Using your rangeslider with GWT,

The problem we have is at some points, we are doing a resize of panels, and of course, we call update so it will set the new positions.

The update function itself knows the correct value from this.$element[0].value Finds the correct position it should be in and tells setPosition to move the handle.

The problem comes, that within setPosition, it then tries to do the math from the position, of what the value should be. Here, due to the resizing of the panels, is where things go wrong.. Because the panel is at a small scale at the time, it calculates the value from the position incorrectly (if the number of pixels for the width is smaller than the number of values).

So sets to an incorrect value.. At a width of zero, it actually sets the max value.

Need a way to call setPosition that does nothing more than sets the position of the handler without trying to calculate the value it think's it is at.

I can see why this is doing it, because in the handleMove you do not know what a possible new value could be. But sadly breaks in my scenario.

I am thinking of implementing something along the lines of:

Plugin.prototype.setPosition = function(pos, triggerSlide, value) {
    ...
    // Snapping steps
    if ( value === undefined ) {
        value = this.getValueFromPosition(this.cap(pos, 0, this.maxHandlePos));
    }
    ...
}

And just need to update everywhere that calls setPosition such as

Plugin.prototype.update = function(updateAttributes, triggerSlide) {
    ...
    this.setPosition(this.position, triggerSlide, this.value);
    ...
}

and the change handler

nrueckmann commented 7 years ago

for those who need a quick fix i created a fork which solves the issue: https://github.com/nrueckmann/rangeslider.js/commit/8edf5921686a4798994ea104e023f39b591d589f

WORMSS commented 7 years ago

Nice one @nrueckmann I didn't think so shove my version back on as a fork on GitHub as sadly our version is on a Locally Hosted GitLab server and didn't think anyone else would be interested and didn't want to waste the time to share. Looks like I was wrong and should have done it anyway.

gregsadetsky commented 5 years ago

Lifesaver!! Thank you so much for this wonderful fix!! :-)