Slider inside uib-accordion - handles change position when range parameters are changed in another accordion

[rishitells]

Steps to reproduce

1. Create a range slider inside <uib-accordion-group>
2. Open accordion by clicking the according heading
3. Click on any of the control points/handles.
4. The handles change their place (flicker).
   (I also tried to use $scope.$$postDigest instead of $timeout inside refresh method but that completely makes it dysfunctional).

I am using refresh method on the ng-cllick event of accordion heading:

<uib-accordion close-others="true">
      <uib-accordion-group is-open="isOpen">
        <uib-accordion-heading>
          <a ng-click="refreshSlider()">Range Slider</a>
        </uib-accordion-heading>
        <rzslider rz-slider-model="minRangeSlider.minValue" rz-slider-high="minRangeSlider.maxValue" rz-slider-options="minRangeSlider.options"></rzslider>
      </uib-accordion-group>
    </uib-accordion>

  $scope.refreshSlider = function() {
    $timeout(function() {
      $scope.$broadcast('rzSliderForceRender');
    });
  };

Demo: https://jsfiddle.net/kh372f1k/

Expected behaviour

The handles should not flicker / change their original place on clicking first time

Actual behaviour

The handles are flickering / changing their original place on clicking first time

[ValentinH]

What browser are you using? I'm seeing a working fine demo on Chrome.

[rishitells]

@ValentinH This is really strange. I opened the fiddle again and there is no flickering now. Used chrome only :|

Though I also have one more issue, which is related to re-rendering of slider when the floor/ceil values are changed (new values retrieved asynchronously from server). I tried to reproduce this issue using $interval to change floor and ceil values.

As soon as floor/ceil values are changed, both the slider handles overlap and stick to corner of the slider.

To reproduce, open the accordion and wait for a few seconds.

Don't know whether I should ask this question here or open a new issue.

Here is the fiddle.

[ValentinH]

I don't know if it's the reason, but in your example you set twice the floor and I think that you want to change the ceil on line 13.

[rishitells]

Oh, I am really sorry for the glitch. I changed the line to change ceil instead of floor. My actual requirement was that I wanted to change the ceil and floor values dynamically. Basically I want the limit labels (range) to change dynamically based on new data. In the fiddle this seems to be working correctly. But in my actual application, I have many accordion groups created using ng-repeat loop. So I am trying to make the sliders dynamic using the following html:

<uib-accordion-group ng-repeat="element in elements">
<rzslider rz-slider-model="element.minVolume" rz-slider-high="element.maxVolume" rz-slider-floor="element.minVolume" rz-slider-ceil="element.maxVolume"></rzslider>
</uib-accordion-group>

The first time it displays file, but as soon as the values change, the slider becomes dysfunctional. Trying to fix it since morning. Will try to reproduce in fiddle.

[ValentinH]

rz-slider-floor and rz-slider-ceil are invalid options. You can inline the options if you want but it's not the cleanest way to do:

<uib-accordion-group ng-repeat="element in elements">
<rzslider rz-slider-model="element.minVolume" rz-slider-high="element.maxVolume" 
      rz-slider-options="{floor: element.minVolume, ceil: element.maxVolume}"></rzslider>
</uib-accordion-group>

[rishitells]

Also tried to do that, but no success. I will try to reproduce it. Thanks a lot for the help.

[ValentinH]

The cleanest way would be to have the options definition in each element like so:

<uib-accordion-group ng-repeat="element in elements">
<rzslider rz-slider-model="element.minVolume" rz-slider-high="element.maxVolume" 
      rz-slider-options="element.options"></rzslider>
</uib-accordion-group>

[rishitells]

Sure, will try that! :)

[rishitells]

@ValentinH I think I finally reproduced the issue in fiddle. The problem roughly seems to be that when there are two (or more) accordion groups, one of which contains slider, and user changes the slider ranges (min, max, floor and ceil) from the other accordion group than the slider one, then, when user opens slider accordion, the slider handles overlap each other and stick to left of the slider bar. I also observed some other problems with slider handle positions when I changed parameters. Below are the steps to reproduce:

1. Make two accordion groups, one of which contains slider, and the other one causes the slider parameters to change.
2. Change the slider parameters using the accordion group.
3. Go to the accordion group which contains slider.

The real scenario here is that user can change something in filter in accordion, and a new server request goes and fetches new data (and new slider ranges based on new data). The slider should be re-generated using the new data.

Here is the fiddle.

[ValentinH]

I fix it by calling your refreshSlider function from your first JSFiddle: https://jsfiddle.net/175pLa9k

Also, you switched min and max so i changed it.

A note for myself, in some case, when the slider is shown, the max and ceil labels are both shown which is the bug referenced in #396. It might also be related to #446.

[rishitells]

Thank you so much! This should definitely help.

[PedroF20]

This solution is very good. It should be included in the docs.

[ValentinH]

It is here: https://github.com/angular-slider/angularjs-slider#my-slider-is-not-rendered-correctly-on-load