正文 

当前位置： 首页 > 问答 >

更改范围滑块的颜色

     2023-02-18     300

关键词：

【中文标题】更改范围滑块的颜色【英文标题】：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 是非常重要的，相反更改对你不起作用。

我的结果是：

【讨论】：

动态更改范围滑块的值

】动态更改范围滑块的值【英文标题】：Changevalueofrangesliderdynamically【发布时间】：2019-03-2820:34:07【问题描述】：我有一些带有input[type="text"]和input[type="range"]的div。<divclass="box"><inputtype="text"value="10"><inputtype="ran... 查看详情

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

】使用js更改输入滑块的颜色渐变？【英文标题】：Changecolorgradientofinputsliderusingjs?【发布时间】：2018-08-0517:43:29【问题描述】：我已经解决了以下问题，但没有一个有我想要的答案：-（所以请不要链接它们并将其标记为重复）... 查看详情

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

】jQuery滑块：颜色更改菜单不会与滑块的其余部分同步【英文标题】：jQueryslider:colorchangingmenuwon\'tsyncwiththerestoftheslider【发布时间】：2012-02-0714:29:33【问题描述】：所以我制作了一个带有滑动图像的滑块和一个随之滑动的菜单。... 查看详情

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

...为红色，第二个为黄色，最后一个刻度为绿色。这是用于更改所有主要刻度的颜色的css代码。（摘自Changingthecolourofsliderticks）.slider.axis.axis-tick-mark{-fx-fill:null;-fx-stroke:red;}答案 查看详情

如何在 Shiny 应用程序的范围滑块的每一侧显示不同的颜色？当您在任一侧滑动时，颜色也应自动填充

】如何在Shiny应用程序的范围滑块的每一侧显示不同的颜色？当您在任一侧滑动时，颜色也应自动填充【英文标题】：HowtodisplayadifferentcoloroneachsideofrangesliderinShinyapp?Asyouslideoneitherside,colorshouldalsobefilledautomatically【发布时间】：2019... 查看详情

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

】如何使用标记创建范围滑块并更改填充范围的颜色？【英文标题】：Howtocreaterangesilderwithmarkerandchangecoloroffilledrange?【发布时间】：2019-08-2113:54:59【问题描述】：我已经在某种程度上完成了如下所示的工作。如何实现这样的范围... 查看详情

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

】使用范围滑块通过javascript更改HSL背景颜色【英文标题】：UsingrangeslidertochangeHSLbackgroundcolorwithjavascript【发布时间】：2021-01-1702:22:45【问题描述】：我正在尝试使用范围滑块来编辑背景颜色，但它不起作用，我哪里出错了：我的... 查看详情

是否可以根据其他表单的输入来更改 HTML5 范围滑块的最小值和最大值？

】是否可以根据其他表单的输入来更改HTML5范围滑块的最小值和最大值？【英文标题】：IsitpossibletochangetheminandmaxofaHTML5rangeslideraccordingtotheinputofanotherform?【发布时间】：2013-03-2806:26:28【问题描述】：参考这个：http://www.alainbruno.nl/... 查看详情

使用 NSAttributedString 更改字符串颜色？

】使用NSAttributedString更改字符串颜色？【英文标题】：ChangestringcolorwithNSAttributedString?【发布时间】：2012-12-2613:54:36【问题描述】：我有一个用于调查的滑块，它根据滑块的值显示以下字符串：“非常差、差、好的、好、非常好... 查看详情

如何更改滑块悬停和活动“阴影”的颜色

】如何更改滑块悬停和活动“阴影”的颜色【英文标题】：HowtochangecolorofSliderhoverandactive"shadow"【发布时间】：2021-08-1813:30:43【问题描述】：我正在使用Material-UI和Styled-Components。我正在努力改变滑块的颜色。我已经能够更... 查看详情

更改 SKTileMapNode 中特定图块的颜色

】更改SKTileMapNode中特定图块的颜色【英文标题】：ChangecolorofspecifictilesinSKTileMapNode【发布时间】：2019-03-2118:56:13【问题描述】：我正在创建一个基于圆形的游戏，其中我有一个操场作为SKTileMapNode，每个图块上都有草纹理，角色... 查看详情

PyQt4 - 将滑块的范围链接到绘图轴的范围

】PyQt4-将滑块的范围链接到绘图轴的范围【英文标题】：PyQt4-linktheextentofaslidertotheextentofaplottingaxis【发布时间】：2016-08-1908:24:12【问题描述】：使用PyQt4和matplotlib如何将滑块的范围（即长度）链接到同一窗口中绘图轴的范围，这... 查看详情

目标 C - 如何使用按钮单击操作更改 UIslider 值

】目标C-如何使用按钮单击操作更改UIslider值【英文标题】：ObjectiveC-HowtochangetheUIslidervaluewithbuttonClickactions【发布时间】：2013-10-0114:55:51【问题描述】：如上图所示，我有1个按钮来减小滑块的值，1个按钮来增加滑块的值。滑块的... 查看详情

phpfacetwp设置滑块的范围(代码片段)

查看详情

如何限制 jQuery UI 滑块的范围？

】如何限制jQueryUI滑块的范围？【英文标题】：HowcanIrestricttherangeofajQueryUIslider?【发布时间】：2017-04-1903:17:32【问题描述】：我创建了一个jQueryUI滑块，它的range设置为true，并且在0和4处有两个句柄。我想将这些句柄的范围限制在... 查看详情

用指针改变angularjs滑块的颜色

】用指针改变angularjs滑块的颜色【英文标题】：Changingcolourofangularjssliderwithpointer【发布时间】：2013-12-0213:10:44【问题描述】：您好，我正在angularjs中构建一个滑块，该滑块会根据您移动指针的位置而改变颜色。1.)如果指针在右侧... 查看详情

带有 x 范围滑块的 Y 轴自动缩放

】带有x范围滑块的Y轴自动缩放【英文标题】：Y-axisautoscalingwithx-rangeslidersinplotly【发布时间】：2018-10-2209:19:47【问题描述】：Afaik，使用x范围滑块时，y轴无法自动缩放。Y范围是相对于整个x范围的y值选择的，并且在放大后不会... 查看详情

如何在angularjs中设置范围滑块的时间？

】如何在angularjs中设置范围滑块的时间？【英文标题】：Howtosettimeinrangsliderinangularjs?【发布时间】：2017-10-0320:37:59【问题描述】：我在Angularjs中使用具有可拖动范围（https://jsfiddle.net/ValentinH/954eve2L/）的滑块进行时间选择。我想... 查看详情