How can we change the color of slider ?

[rohanc202]

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

*Additional context
.scss file -
.custom-slider{
&.npn-slider{
.slider{
.bar{
height: 30px;
}
}
}
}

.html file -
<npn-slider class="custom-slider" [min]="18" [max]="90" [hide-values]="true" (onChange)="onSliderChange($event)" showStepIndicator=true
[minSelected]=25 [maxSelected]=60 [step]="1" [showStepIndicator]="true">

[jdcreative]

my solutions is:

:host >>> .npn-slider .slider.bar {
height: Npx !important;
}
:host >>> .npn-slider .slider .bar > span.left-handle{
background: N !important;
border: Npx solid N !important;
}
:host >>> .npn-slider .slider .bar > span.right-handle{
background: N !important;
border: Npx solid N !important;
}
:host >>> .npn-slider .slider .bar div.filler{
border: Npx solid #N !important;
}
:host >>> .npn-slider .slider .bar div.filler > span{
background: N !important;
}
:host >>> .npn-slider .slider .bar > span.left-handle .handle-tooltip{
background: N !important;
border: N px solid N !important;
color: N !important;
<<< you can add new styles >>>
letter-spacing: 1.3px !important;
}
:host >>> .npn-slider .slider .bar > span.right-handle .handle-tooltip{
background: N !important;
border: N px solid N !important;
color: N !important;
}
:host >>> .npn-slider .slider .bar > span.left-handle .handle-tooltip::after{
border-top-color:N !important;
}
:host >>> .npn-slider .slider .bar > span.right-handle .handle-tooltip::after{
border-top-color:N !important;
}

As for me it is better to use : :host for ng.deep