Slider bar not filling the inner bar when max and min bounds are changed dynamically

[LouisGacke]

I have noticed that when I initialize the daterangeslider with a min and max bounds the slider displays and functions correctly. However if I change the bounds after a selection of a filter from a selection box the right side of the bar will not "fill" and there is an empty offset and the right handle cannot be dragged to fill it. This offset distance changes when the bounds have different values but I cannot see any logical correlation.

I also had an issue with the right arrow, it was rendered over the bar and I had to specify a right of -30px to position it correctly. I have noticed that this is the distance of the largest offset of the bar not "filling".

[ghusse]

Do you have a live example of your issue? jsfiddle/static HTML ?

[LouisGacke]

This is as best as i can replicate it. Notice as you pick different drop-down values the bar wont fill. Also if you drag the bar to the unfilled side it gets shorter by a step.

http://jsfiddle.net/8bqpaej1/1/

[ghusse]

In your example, the selected range seems very - very - small regarding the whole selection area. It seems normal that the range does not appear. Am I wrong?

[LouisGacke]

I'm not sure what you mean? This issue is that the bounds do not fill the bar. The range is not a problem. I would think that if the difference between my start and end time is 10 minutes or 10 months the full bar would still represent that difference but for some reason the max width of the bar is changed.

[ghusse]

I don't understand your point. Can you show me (with an image for instance) how do you expect it to be displayed?

[LouisGacke]

So the initial or "second" selection in the dropdown gives us this slider:

Which can be noted has a full bar, now when we select the "first" dropdown option we see that the bar never fills the inner bar and has a small gap:

And then if we select the "third" dropdown option the gap is larger:

The handles cannot be dragged to make the bar fill the inner bar and if we slide the bar to the right i.e the side with the gap the bar actually gets a step smaller each time.

I would expect the bar to be able to fill the inner bar every time as the bounds have changed

[ghusse]

Okay. I do not have this result AT ALL.

Which browser do you use?

[LouisGacke]

I am using Chrome. I have also tested in Firefox and it has the same issue

[ghusse]

Are you sure the example you in your jsFiddle is working?

Example:

var EndDate = new Date();
// Here, StartDate is not a Date but an integer
// And you are setting the day in the month (with setDate) to be the
// current month index - 12
// Basically dayInMonth = 2 (we are in March) - 12 = -10
// 10 days before the first of March
var StartDate = new Date().setDate(EndDate.getMonth() - 12);

I suggest you to also set defaultValues, otherwise you cannot really know what they'll be.

And in your changeSlider, as you're only changing the bound, you cannot really determine what the values will be.

Bounds = min and max selectable values Values = represented by the blue bar

[LouisGacke]

The initial start and end dates are not important, i used that example to make sure they are initialized with something. Its the changing of them that is the issue.

I realize I am only changing the bounds as i want the values to stay as they were, the issue is the bound's value does not equal the end of the full bar in my case. If I were to change the values on the changeSlider function to lets say the bounds it still wouldn't fill the bar, like it should

[LouisGacke]

It almost seems that whatever function is used to work out the size of a step in pixels has a rounding error or something like that as its missing a step from the end.