Angular ::ng-deep {} not working in *.component.css ng5-slider

Question

As you can see I have the code underneath written in angular, version: 9.1.2.I wanted to customize the ng-5 slider but it isn't working. Everything should be working but when I use the tag::ng-deep {} in my CSS it gives me the error "Do not use empty rulesetscss(emptyRules)". Don't know why it happens. It should be working I wanted to make the dots smaller and make it black (I know it isn't what's in the css but that's an example I got from the net but it doesn't work.)

 .quartos { display: grid; grid-template-columns: 15% 70% 15%; padding: 0; } #procuraQ { grid-column-start: 2; grid-column-end: span 1; } #serviços { float: right; }::ng-deep {.custom-slider.ng5-slider.ng5-slider-bar { background: #ffe4d1; height: 2px; }.custom-slider.ng5-slider.ng5-slider-selection { background: orange; }.custom-slider.ng5-slider.ng5-slider-pointer { width: 8px; height: 16px; top: auto; /* to remove the default positioning */ bottom: 0; background-color: #333; border-top-left-radius: 3px; border-top-right-radius: 3px; }.custom-slider.ng5-slider.ng5-slider-pointer:after { display: none; }.custom-slider.ng5-slider.ng5-slider-bubble { bottom: 14px; }.custom-slider.ng5-slider.ng5-slider-limit { font-weight: bold; color: orange; }.custom-slider.ng5-slider.ng5-slider-tick { width: 1px; height: 10px; margin-left: 4px; border-radius: 0; background: #ffe4d1; top: -1px; }.custom-slider.ng5-slider.ng5-slider-tick.ng5-slider-selected { background: orange; } }

 <div class="quartos"> <div id="procuraQ"> <div id="barraProcura"> <div id="procura"> <div class="custom-slider"> <ng5-slider [(value)]="minValue" [(highValue)]="maxValue" [options]="options"></ng5-slider> </div> <button routerLink="/douroVinhas/quartos/servicos">Serviços</button> </div> <div id="quartosVisao"></div> </div> </div>

Answer 1

Try this to see if it works:

.ng5-slider::ng-deep .ng5-slider-bar {
  background: #ffe4d1;
  height: 2px;
}
.ng5-slider::ng-deep .ng5-slider-selection {
  background: orange;
}
.ng5-slider::ng-deep .ng5-slider-pointer {
  width: 8px;
  height: 16px;
  top: auto;
  /* to remove the default positioning */
  bottom: 0;
  background-color: #333;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.ng5-slider::ng-deep .ng5-slider-pointer:after {
  display: none;
}
.ng5-slider::ng-deep .ng5-slider-bubble {
  bottom: 14px;
}
.ng5-slider::ng-deep .ng5-slider-limit {
  font-weight: bold;
  color: orange;
}
.ng5-slider::ng-deep .ng5-slider-tick {
  width: 1px;
  height: 10px;
  margin-left: 4px;
  border-radius: 0;
  background: #ffe4d1;
  top: -1px;
}
.ng5-slider::ng-deep .ng5-slider-tick.ng5-slider-selected {
  background: orange;
}

I would use SASS ( scss ) instead of CSS but that's just a personal opinion of mine.