rangeslider.js icon indicating copy to clipboard operation
rangeslider.js copied to clipboard

Slider handle slides beyond slider width

Open mrksbnch opened this issue 8 years ago • 5 comments

If the max value is not a multiple of the step value, the slider handle slides beyond the slider width.

screen shot 2016-04-16 at 19 33 46

mrksbnch avatar Apr 16 '16 17:04 mrksbnch

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).

marqsm avatar Jun 28 '16 09:06 marqsm

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 avatar Aug 24 '16 08:08 diehell

@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 avatar Aug 24 '16 08:08 marqsm

@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.

mrksbnch avatar Aug 25 '16 09:08 mrksbnch

This hasn't been fixed for two years now and it persists to be on the demo page.

ststaynov avatar Jul 06 '18 14:07 ststaynov