Change colour of range slider

Question

Recently I am installing npnslider https://npnm.github.io/NpnSlider/ .Basically I have integrated functionalities of this but the problem is how do we change colors according to the preference of this slider

score 1 · Answer 1 · answered Mar 02 '20 at 04:49

Add in your css file- and i think change range slider color

.slider[_ngcontent-c1] .bar[_ngcontent-c1] div.filler[_ngcontent-c1] > span[_ngcontent-c1] {
    background: #000 !important;
}

.slider[_ngcontent-c1] .bar[_ngcontent-c1] > span.left-handle[_ngcontent-c1], .slider[_ngcontent-c1] .bar[_ngcontent-c1] > span.right-handle[_ngcontent-c1] {
    background: white !important;
    border-color: red !important;
}

.slider[_ngcontent-c1] .bar[_ngcontent-c1] {
    background: #f5f5f5 !important;
}

.slider[_ngcontent-c1] .bar[_ngcontent-c1] > span.left-handle[_ngcontent-c1] .handle-tooltip[_ngcontent-c1], .slider[_ngcontent-c1] .bar[_ngcontent-c1] > span.right-handle[_ngcontent-c1] .handle-tooltip[_ngcontent-c1] {
    background: black;
    color: white;
    border-color: black !important;
}

.slider[_ngcontent-c1] .bar[_ngcontent-c1] > span.left-handle[_ngcontent-c1] .handle-tooltip[_ngcontent-c1]:before, .slider[_ngcontent-c1] .bar[_ngcontent-c1] > span.right-handle[_ngcontent-c1] .handle-tooltip[_ngcontent-c1]:before {
    border-top-color: #000;
}

.slider[_ngcontent-c1] .bar[_ngcontent-c1] > span.left-handle[_ngcontent-c1] .handle-tooltip[_ngcontent-c1]:after, .slider[_ngcontent-c1] .bar[_ngcontent-c1] > span.right-handle[_ngcontent-c1] .handle-tooltip[_ngcontent-c1]:after {
    border-top-color: #000;
}

score 1 · Answer 2 · answered Mar 02 '20 at 06:22

1

I found the answer this works for me

 .slider .bar div.filler > span {
        background: rebeccapurple !important;
      }

answered Mar 02 '20 at 06:22

Pandula

45
5

score 1 · Answer 3 · answered Mar 02 '20 at 06:26

1

Give it a class with background color of your choice.

<npn-slider class='custom-class' [multiRange]="false" [min]="2006" [max]="2020" [minSelected]="2010"></npn-slider>
</div>

<style>
.custom-class {
  background: 'yourcolor';
}
</style>

answered Mar 02 '20 at 06:26

adil hussain

800
4
10

score 0 · Answer 4 · edited Mar 29 '20 at 12:52

I did have the same problem, after some time reading and searching about It, I have a solution for It, I did found the ::ng-deep css property, It preceded for a custom class in npn-slider selector help us to change all css on It and any other component, this is my css file:

.my-slider::ng-deep .slider .bar > span.left-handle {
  background: #dcb2b2 !important;
  border: 7px solid #b35a57 !important;
}

.my-slider::ng-deep .slider .bar > span.right-handle {
  background: #dcb2b2 !important;
  border: 7px solid #b35a57 !important;
}

.my-slider::ng-deep .slider .bar div.filler > span {
  background: #dcb2b2 !important;
}

.my-slider::ng-deep .slider .bar > span.left-handle .handle-tooltip {
  color: #b35757 !important;
  background: #ebd2d2 !important;
  border: 1px solid #c37a7a !important;
}

.my-slider::ng-deep .slider .bar > span.left-handle .handle-tooltip:after {
  border-top-color: #ebd2d2 !important;
}

.my-slider::ng-deep .slider .bar > span.right-handle .handle-tooltip {
  color: #b35757 !important;
  background: #ebd2d2 !important;
  border: 1px solid #c37a7a !important;
}

.my-slider::ng-deep .slider .bar > span.right-handle .handle-tooltip:after {
  border-top-color: #ebd2d2 !important;
}

.my-slider::ng-deep .slider .bar div.filler > div.step-indicators > span {
  background: #b35757 !important;
}

And this is my html

<npn-slider  class="my-slider" [min]="1000" [max]="5000" (onChange)="onSliderChange($event)" [step]="500" [showStepIndicator]="true"></npn-slider>

At this link you can find the style routes or how I did do this, exploring with browser inspector XD.

At the last, is very important that you use !important in each css property, on the contrary the changes aren't work for you.

My result was:

Change colour of range slider

4 Answers4