更改JQuery滑块的背景颜色

Question

我知道我可以通过执行以下操作将值的背景颜色从min设置为当前滑块选择:

#slider .ui-slider-range { background: #88ac0b; }

如何设置整个滑块的背景颜色(不仅仅是从最小值或最大值到所选值)

Answer 1

我尝试了其他一些答案,但它们似乎都没有.这对我有用,可以让滑块的范围和其余部分颜色相同:

$( "#my-slider" ).css('background', 'rgb(0,255,0)');
$( "#my-slider .ui-slider-range" ).css('background', 'rgb(0,255,0)');

Answer 2

jquery ui css应用图像,隐藏应用于滑块元素的任何背景颜色.加载jquery css后,只需在自己的样式中将background-image指定为none.我正在尝试根据ui.value动态设置ui-slider-range的颜色(html页面上的每个滑块),并且在创建滑块期间没有太多运气在幻灯片选项中设置它.

Answer 3

这似乎可能会影响其他UI元素,如果你有它们,但在我的情况下,这不是一个问题,这工作:

.ui-widget-content { background: purple; }

作为奖励,如果您想要更改小拖动手柄的颜色,请使用:

.ui-widget-content .ui-state-default { background: chartreuse; }

(提供的配色方案仅用于演示目的.:)

注意:我使用以下过程在Chrome中解决了这个问题:

1. 打开开发者工具
2. 选择"元素"选项卡,然后使用放大镜工具选择滑块背景
3. background-color在"计算样式"中查找并使用小三角形展开它
4. 单击jquery-ui.css:62右侧的链接(例如)以查看相关的css行
5. 复制该行并将其放在样式表中,并附上您喜欢的内容

Answer 4

认为这些值可能对以后阅读此主题的人有用.这些设置在jQuery Slider中使用,有2个滑块.心连心.

#slider-container {width:200px;}
#slider-container #slider-min-value {float:left;margin-top:6px;}
#slider-container #slider-max-value {float:right;margin-top:6px;}

一般滑块背景

#slider-container .ui-widget-content { border: 1px solid #aaaaaa; background: #dfe5e7;}

2标记颜色之间

#slider-container .ui-widget-header { border: 1px solid #aaaaaa; background: #00caff; }

MARKER

#slider-container .ui-state-default { border: 1px solid #aaaaaa; background: #ffffff; }
#slider-container .ui-state-default { background-image: url('slider-button.png'); }

Answer 5

我没看过，但我猜：

#slider {background-color: #f00; /* or whatever colour you want */ }

会工作。假设该#slider元素就是我所认为的那样。

编辑：

抱歉花了这么长时间，看了 jQueryUI 的演示（特别是颜色选择器：http://jqueryui.com/demos/slider/#colorpicker），似乎该background-color属性似乎是通过应用的附加类来应用的到元素。

将类别从 更改为ui-slider-range似乎ui-slider-range-max很有希望，但没有取得任何成果（也许除了明显翻转彩色区域之外）。

这很奇怪。