Изменить цвет ползунка диапазона

Question

Недавно я устанавливаю npnslider https://npnm.github.io/NpnSlider/. В основном я интегрировал эти функции, но проблема в том, как мы можем изменить цвета в соответствии с предпочтениями этого слайдера

Answer 1

Я нашел ответ, это работает для меня

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

Answer 2

Дайте ему класс с цветом фона на ваш выбор.

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

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

Answer 3

Добавьте в ваш css файл - и я думаю, что измените цвет ползунка диапазона

.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;
}

Answer 4

У меня была такая же проблема, после некоторого времени чтения и поиска, у меня есть решение для нее, я нашел свойство ::ng-deep css, которому предшествовал пользовательский класс в справке селектора npn-slider нам нужно поменять все css на него и любой другой компонент, это мой css файл:

.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;
}

и это мой html

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

на этом ссылка вы можете найти маршруты стилей или узнать, как я это сделал, исследуя с помощью инспектора браузера XD.

Наконец, очень важно, чтобы вы использовали !important в каждом свойстве css Напротив, изменения не работают для вас.

Мой результат был: