noUiSlider not showing up in angular application

Edit - My hack solution: The issue has to do with how/when/where angular is getting the NoUiSlider CSS. What made this work was adding the css import @import "~nouislider/distribute/nouislider.min.css"; to my src > styles.css file.

I do not consider this an actual solution. I would like all of the css for the slider to be contained inside the component's CSS file. So I guess my updated question is: How do I get NoUiSlider to use the CSS from the component that contains it?

Original question:

My slider will not show up in my Angular application. What am I missing?

I'm simply trying to get the most basic slider to render in my application and I get no errors as far as I can tell.

package.json -- I'll add more if needed ( I've also tried placing "nouislider": "^14.1.1", in "dependencies")

{
  ...
  "devDependencies": {
    ...
    "@types/nouislider": "^9.0.6",
    "nouislider": "^14.1.1",
    ...
  }
}

timeline-scroller.component.html ('Test text' is the only thing that I see when my page renders)

<div #contentComponent>Test text</div>

timeline-scroller.component.ts (, {static: true} is a new requirement in angular 8)

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import * as noui from 'nouislider';

@Component({
  selector: 'app-timeline-scroller',
  templateUrl: './timeline-scroller.component.html',
  styleUrls: ['./timeline-scroller.component.css']
})
export class TimelineScrollerComponent implements AfterViewInit {
  @ViewChild('contentComponent', {static: true}) contentElement: ElementRef;
  public slider: noui.noUiSlider;

  constructor() { }

  ngAfterViewInit(): void {
    this.slider = noui.create(
      this.contentElement.nativeElement, {
        start: 1,
        range: { min: 0,  max: 20 }
    });
  }
}

Solution

In order to use the libraries css in my component I needed to set the component encapsulation to `encapsulation: ViewEncapsulation.None'

My component decorator then became:

@Component({
  selector: 'app-timeline-scroller',
  templateUrl: './timeline-scroller.component.html',
  styleUrls: ['./timeline-scroller.component.css'],
  encapsulation: ViewEncapsulation.None
})

Then in my slider.component.css I was able to add the import:

@import "~nouislider/distribute/nouislider.min.css";