rangeslider.js
rangeslider.js copied to clipboard
Slider handle slides beyond slider width
If the max
value is not a multiple of the step
value, the slider handle slides beyond the slider width.

This might be related to the point of dom-loading at which the rangeslider is initiated. On init, it calculates max. width. If the element is not yet visible (might not have correct width if not absolute), the component takes a wrong width.
I got this when loading on jQuery's ready-event, but when transferred initiation to load-event, it renders correctly (as containing element at that point has a correct width etc.).
Could be fixed by making a verification of the width at a later point in time (eg. first time user clicks element or something).
I am getting this too. If the value and the max-value is not multiple of the step, the slider goes beyond the width. How do you guys handle this? Do you calculate the min,max,step base on the values upfront before passing initialising to the slider?
@diehell I'm not sure if this is the same problem I had - mine was related to the point in time where RangeSlider calculates it's own width. If the screen layout is manipulated between the initialisation of rangeslider and rendering of the slider, some stuff goes off. If you try to force it in CSS to be correct from the beginning, does that fix your problem?
This could maybe be fixed in rangeslider by making it double-check the actual width when rendering.
@marqsm I checked the calculated widths of the elements that rangeslider.js
is using, and they all seem to fit. I have tested this without manipulating the layout in between the initialization and rendering of the slider (as you have mentioned). That being said, I think this issue also happens if the calculated element widths are correct.
@diehell For now, I think you could either calculate the settings up front or, if you have time, create a pull request to fix this issue.
This hasn't been fixed for two years now and it persists to be on the demo page.