Style to ng5-slider in angular is not applied

Question

I have an Angular project with ng5-slider. I am following following article:

https://github.com/angular-slider/ng5-slider/blob/master/STYLING.md

I am trying to change the font size:

scss:

.custom-slider {
    .ng5-slider {
      .ng5-slider-selection {
        background: rgb(255, 255, 0) !important;
      }

      .ng5-slider-span {
        background-color: red !important;
        font-size: 6px;
      }

      .ng5-slider-pointer{
        background-color: red !important;
        font-size: 6px;
      }
    }
  }

  .ng5-slider .ng5-slider-pointer{
    height: 16px !important;
    background-color: red !important;
  }

  .ng5-slider-span{
    background-color: red !important;
  }

html:

 <div class="custom-slider">
     <ng5-slider [(value)]="value" [options]="options"></ng5-slider>
 </div>

No matter what I add of styles it is not applied. I can see in Chrome following is generated:

<ng5-slider _ngcontent-c0="" class="ng5-slider" _nghost-c1="" ng-reflect-value="50"
    ng-reflect-options="[object Object]"><span _ngcontent-c1=""
        class="ng5-slider-span ng5-slider-bar-wrapper ng5-slider-left-out-selection" ng5sliderleftoutselelem=""
        style="visibility: hidden;"><span _ngcontent-c1="" class="ng5-slider-span ng5-slider-bar"></span></span><span
        _ngcontent-c1="" class="ng5-slider-span ng5-slider-bar-wrapper ng5-slider-right-out-selection"
        ng5sliderrightoutselelem="" style="visibility: hidden;"><span _ngcontent-c1=""
            class="ng5-slider-span ng5-slider-bar"></span></span><span _ngcontent-c1=""
        class="ng5-slider-span ng5-slider-bar-wrapper" ng5sliderfullbarelem=""><span _ngcontent-c1=""
            class="ng5-slider-span ng5-slider-bar"></span></span><span _ngcontent-c1=""
        class="ng5-slider-span ng5-slider-bar-wrapper" ng5sliderselbarelem=""
        style="visibility: hidden; width: 80px; left: 0px;"><span _ngcontent-c1=""
            class="ng5-slider-span ng5-slider-bar ng5-slider-selection"
            ng-reflect-ng-style="[object Object]"></span></span><span _ngcontent-c1=""
        class="ng5-slider-span ng5-slider-pointer ng5-slider-pointer-min" ng5sliderminhelem=""
        ng-reflect-ng-style="[object Object]" aria-valuenow="50" aria-valuetext="Male(50%), Female(50%)"
        aria-valuemin="0" aria-valuemax="100" role="slider" tabindex="0" style="left: 64px;"></span><span
        _ngcontent-c1="" class="ng5-slider-span ng5-slider-pointer ng5-slider-pointer-max" ng5slidermaxhelem=""
        ng-reflect-ng-style="[object Object]" style="display: none;"></span><span _ngcontent-c1=""
        class="ng5-slider-span ng5-slider-bubble ng5-slider-limit ng5-slider-floor" ng5sliderflrlabelem=""
        style="visibility: hidden; left: 0px;">Male(0%), Female(100%)</span><span _ngcontent-c1=""
        class="ng5-slider-span ng5-slider-bubble ng5-slider-limit ng5-slider-ceil" ng5sliderceillabelem=""
        style="visibility: hidden; left: -19px;">Male(100%), Female(0%)</span><span _ngcontent-c1=""
        class="ng5-slider-span ng5-slider-bubble ng5-slider-model-value" ng5sliderminlabelem=""
        style="visibility: visible; left: -19px;">Male(50%), Female(50%)</span><span _ngcontent-c1=""
        class="ng5-slider-span ng5-slider-bubble ng5-slider-model-high" ng5slidermaxlabelem=""
        style="visibility: hidden;"></span><span _ngcontent-c1=""
        class="ng5-slider-span ng5-slider-bubble ng5-slider-combined" ng5slidercmblabelem=""
        style="visibility: hidden;"></span><span _ngcontent-c1="" class="ng5-slider-ticks" ng5slidertickselem=""
        hidden="">

Any ideas if this is the control, angular or the styling part?

Answer 1

try this one inside css file

::ng-deep {
    .custom-slider .ng5-slider .ng5-slider-selection {
        background: #DF495B;
      }
}

hope this will work