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>

Hello, can you update question of what version of angular your running — Lucho, Apr 28 '20 at 17:30
::ng-deep is deprecated according to [docs](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep) however I'm not sure that's where your problem lies, does that error come if you comment it out the ::ng-deep part? — Lucho, Apr 28 '20 at 17:45
Then you have to rollback your code and localize it and update your post ;) — Lucho, Apr 28 '20 at 18:08
It seems though that there is some css rules/linting issues, you probably have some rule during compile time throwing that where you are simply not suppose to leave an empty class/id with empty brackets — Lucho, Apr 28 '20 at 18:22

AliF50 · Accepted Answer · 2020-04-28T18:17:30.380

0

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.

edited Apr 28 '20 at 18:17

answered Apr 28 '20 at 17:12

AliF50

16,947
1
21
37

I would use scss but i don't know how to – Rui Fernando Apr 28 '20 at 17:26
It's okay, CSS should be fine. If you create a minimal stackblitz, I can help you better. – AliF50 Apr 28 '20 at 17:43
I wrote it in a `SCSS` way that's why it doesn't work. And I think you in your question wrote it in a `SCSS` way as well. I suggest you follow this to convert CSS project to SCSS project (https://stackoverflow.com/questions/40726081/angular-cli-from-css-to-scss). Converting to SCSS is not necessary but I like SCSS a lot. Thanks for the stackblitz, I have edited my answer to hopefully work for you using CSS. – AliF50 Apr 28 '20 at 18:17
By the way how can i speed up the movement? – Rui Fernando Apr 28 '20 at 18:51
I am not sure how to do that with the slider. – AliF50 Apr 28 '20 at 19:19
Unlucky. Thanks anyway. – Rui Fernando Apr 28 '20 at 20:00

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

1 Answers1