更改范围滑块的颜色

Posted

技术标签:

【中文标题】更改范围滑块的颜色【英文标题】:Change colour of range slider 【发布时间】:2020-06-14 08:53:16 【问题描述】:

最近我正在安装 npnslider https://npnm.github.io/NpnSlider/ 。基本上我已经集成了这个功能,但问题是我们如何根据这个滑块的偏好来改变颜色

【问题讨论】:

【参考方案1】:

添加您的 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;

【讨论】:

【参考方案2】:

我找到了适合我的答案

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

【讨论】:

【参考方案3】:

给它一个具有您选择的背景颜色的类。

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

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

</style>

【讨论】:

【参考方案4】:

我确实遇到了同样的问题,经过一段时间的阅读和搜索,我找到了解决方案,我确实找到了 ::ng-deep css 属性,它在 npn-slider 选择器中的自定义类之前帮助我们更改 It 和任何其他组件上的所有 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>

在link,您可以使用浏览器检查器 XD 探索样式路线或我是如何做到这一点的。

最后,在每个 css 属性中使用 !important 是非常重要的,相反更改对你不起作用。

我的结果是:

【讨论】:

以上是关于更改范围滑块的颜色的主要内容,如果未能解决你的问题,请参考以下文章

jQuery滑块:颜色更改菜单不会与滑块的其余部分同步

使用js更改输入滑块的颜色渐变?

JavaFX - 更改特定于滑块的颜色

使用 NSAttributedString 更改字符串颜色?

如何使用标记创建范围滑块并更改填充范围的颜色?

使用范围滑块通过 javascript 更改 HSL 背景颜色