.slider-horizontal style is "undefined" until slider is clicked on, causing a sudden height change

[John Churchill]

When the slider renders with tick labels, it is too short. The labels spill over into the elements below. Checking the chrome elements, I see style="undefined":

<mv-slider _ngcontent-bnc-c120="" _nghost-bnc-c114="" ng-reflect-ticks="1,2,3,4,5" ng-reflect-ticks-labels="10,100,1,000,10K,100K" ng-reflect-value="3" ng-reflect-min="1" ng-reflect-max="5"><div class="slider slider-horizontal" id="" style="undefined"> ..... </mv-slider>

On first click the style is replaced by "margin-bottom: 28px" (in my case), which bounces the slider up a few pixels and everything down a bunch. Apparently that should have been precomputed and put there in advance.

Without changing the code, my way around it to set style to the value I know it will get upon clicked, AND make it first:
<mv-slider [style]="'margin-bottom: 28px'" ...
If it's not first, then it will get overwritten with "undefined" and have no effect, and then the first-click issue happens. This part of slider.component.ts seems to be at least part of the issue:

  initialStyle: any;

  // This property is not applied to the underlying slider element
  @Input()
  set style(value: any) {
    if (this.slider) {
      this.slider.getElement().setAttribute('style', value);
    } else {
      this.initialStyle = value;
    }
  }

If it's the first value in the tag, then initialStyle gets the value and it "sticks". If it's not the first value, then initialStyle remains undefined, and gets applied to style after each additional attribute is set. A quick code fix might be to remove the "else" part so that initialStyle always holds the style that was set.

I'm not sure where the "margin-bottom: 28px" comes from on first click. That must have something to do with the underlying seiyria component. Perhaps it tries to put it there, but the ngx component overwrote it (either with undefined or what I pass into [style])?