Range Slider Min & Max are not displayed Unless Window resize is applied

[rhgithub1]

Is there a refresh method which must be invoked for the minimum and maximum values to be set for the range slider? If I adjust the window the value gets set on the view.

[piotrdz]

The slider component should be displayed correctly on first render, unless you are changing the options object programmatically, in which case the change detection may not always pick it up.

Can you provide an example of your code that reproduces this issue?

[rhgithub1]

I am not changing anything programatically. Here is my component Class and HTML snippet

export class PersonalFilterComponent{
public age: any = {};
public minValue: number = 20;
maxValue: number = 30;
options: Options = {
floor: 18,
ceil: 55,
step: 1
};

}

HTML Snippet

<ng5-slider [(value)]="minValue" [(highValue)]="maxValue" [options]="options">

[piotrdz]

I pasted your code into a Plunk and it seems to be working correctly:
https://plnkr.co/edit/IideE3?p=preview

[rhgithub1]

thank you! I was able to confirm that issue exists when slider is added to a bootstrap collapse (I am using ng bootstrap since my app is built of angular 5). Is there a force refresh method I can invoke to refresh the slider?

[piotrdz]

Thanks for the additional information. I have managed to reproduce the issue now. It's caused by applying CSS styles that change the display property (e.g. none -> block).

There are a few JS tricks that I could employ to detect and react to such changes, but the downside is that it would have a significant performance hit, and it would complicate the library code, which is already very complicated.

What I can do instead, is to add an input that would trigger a refresh of the slider. It would act similarly to broadcasting rzSliderForceRender in angularjs-slider. It would need to be manually triggered each time but I think it's a good trade-off.

[rhgithub1]

thank you @piotrdz just in time before I was thinking of using another library. Do you know how soon or late this feature maybe available? really appreciate your time spent on this!

[piotrdz]

@rhgithub1 It's done now and released in v1.1.2. It was a relatively easy fix. I added an example of how to use it on Github pages: https://angular-slider.github.io/ng5-slider/#manual-refresh-slider

[koverda]

@piotrdz thank you!