Overlapping max and ceil value label

[aaabidunique]

Steps to reproduce

1. After adding slider and set max and ceil value.
2. force render before actually showing to user.
   Note: I am using this plugin in ionic app.

Expected behaviour

It should show floor and min value with same label and max and ceil with same label.

Actual behaviour

Max value and ceil value shows overlapping label with same value.

[ValentinH]

Does it only occur with vertical sliders? Could you set up a demo reproducing the issue please?

[aaabidunique]

Haven't tried but i think yes.
I tried to mock the same way i am doing on app and got the same result in the end.

http://jsfiddle.net/cwhgLcjv/113/

[ValentinH]

Indeed, this is a bug that only occurs with vertical sliders. However, your issue is due to the fact that you instantiate your slider value without model/high values...

[aaabidunique]

Actually i am providing these value at the time of Initialization but could do the same for the example.
Hope it will be fixed in next build or any quick fix.
FYI i am assigning those value at Initialization.

[ValentinH]

Are you sure that when the slider becomes visible, it's values are correctly initialized?

[aaabidunique]

Actually values are there when it become visible because i can see but doesn't show properly, so ineed to use
$timeout(function () {
$scope.$broadcast('rzSliderForceRender');
});
for force render then its appear as above image.

[aaabidunique]

@ValentinH any update on this bug.

[ValentinH]

No, I don't have much time to spend on this project currently.

It would be easier to investigate it i you could provide a demo of the bug with correctly initialized value on start.

[costea93]

Also this bug persist on vertical sliders!

[ValentinH]

@costea93 do you have a demo reproducing this bug?

[costea93]

unfortunately, i can't show here some code from project.

[ValentinH]

Unfortunately, if I don't have any code, I can't reproduce and understand easily the bug.
Thus, 2 solutions:

• you can provide a minimal reproducing demo that only shows slider specific code.
• you try to understand to library code, find a way to fix your issue and submit a pull request.

[costea93]

@ValentinH the problem is here:
<span class="rz-bubble rz-limit rz-ceil"></span> <!-- // 5 Ceiling label -->
because initially this span needs to be hidden, at the moment this span has style: visibility: visible;

[ValentinH]

The function responsible for showing/hiding labels is this one: https://github.com/angular-slider/angularjs-slider/blob/master/src/rzslider.js#L1124

[costea93]

i can't change library to see what will be happened after my changes because we use rzslider as bower component. :(

I don't know why first span have visibility hidden and second visible

<span class="rz-bubble rz-limit rz-floor" style="visibility: hidden; left: 0px;">1000</span>
<span class="rz-bubble rz-limit rz-ceil" style="visibility: visible; left: 362.641px;">2000</span>

And one intresting thing here - this problem disappear after screen resize.

[ValentinH]

Actually, you can edit even with Bower. You just need to locate the rzslider.js file in the bower folder and directly edit it.

[costea93]

The problem is here:

if (isMinLabAtCeil) { clHidden = true; this.hideEl(this.ceilLab); } else { clHidden = false; this.showEl(this.ceilLab); }
because when page was loaded if condition is executed and everything is ok. But i have one click event and do that in this event to rerender slider:
$timeout(function () { $scope.$broadcast('rzSliderForceRender'); }, 100);
after that executed condition is else because isMinLabAtCeil === false

do you have any ideas, how can i resolve that?

[ValentinH]

It is a weird behavior, I really need to see a demo of it...

[ValentinH]

@costea93 in your slider options, do you set floor and ceil?

[ValentinH]

I finally managed to reproduce it and fix it. Released with 5.8.5

[vkshriva]

Above issue is again introduce in latest version ..6.6.0 .Can you plz fix there as well

[ValentinH]

Again, please provide a demo showing the bug.

[vkshriva]

Thanks, Valentin for a quick response.

I'll share the same as the application is big, I'll be back soon. Meanwhile, let me share whatever I am facing the issue theoretically

Case1: When I am using version 6.6.0, while first time rendering of a page slider will look like as below

and restrictedRange property will work fine

Case2: When I am using version 5.8.5 while rendering of a page slider will work fine but restrictedRange will not work