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