更改JQuery滑块的背景色

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

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

---

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

我没有看过，但我猜：

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

会有用的。假设

#slider

元素就是我所认为的

---

编辑：

很抱歉花了这么长时间，在查看了jQueryUI的演示（特别是颜色选择器：）之后，

background color

属性似乎是通过应用于元素的其他类应用的

将类从

ui-slider-range

更改为

ui-slider-range-max

似乎很有希望，但没有取得任何效果（除了明显地翻转彩色区域）

---

这很奇怪。

jquery ui css应用了一个图像，它隐藏了应用于滑块元素的任何背景色。加载jQueryCSS后，只需在自己的样式中将背景图像指定为“无”。 我正试图根据ui.value动态设置ui滑块范围的颜色（html页面上的每个滑块），但在创建滑块期间，在幻灯片选项中设置它的运气不太好

$( "#slider" ).slider({
  range: "max",
  min: 1,
  max: 200,
  step: 1,
  slide: function(event, ui) {
  ....... = ui.value
  ......
  });

});

---

重要的是这里的

范围：“max”

显示了滑块递增顺序的背景，如果想要减少，则使用

的“min”

和主题css

.ui小部件内容

属性必须以所需的颜色存储，如

背景：#3E8FFF

这似乎可能会影响其他ui元素，但在我的情况下，这不是问题，而且这是有效的：

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

另外，如果要更改小拖动控制柄的颜色，请使用：

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

（提供的配色方案仅供演示之用。：）

注意：我通过以下步骤在Chrome中解决了这个问题：

开放式开发工具

选择“元素”选项卡，然后使用放大镜工具选择滑块背景

在“计算样式”中找到

背景色

，并用小三角形展开

单击右侧的链接（例如

jqueryui.css:62

）查看css的相关行

复制该行并将其与您喜欢的内容一起放入样式表中

---

我认为这些值可能对以后阅读此主题的人有用。 这些设置在一个jQuery滑块中使用，有两个滑块处于打开状态。嗯

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

标记

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

CSS:

• 在类中使用此选项：

  .ui-widget-content .sliderTestClass { background: #000000; }
  

• 或者，对于ID：

  #mySlider { background: #000000; }
  

---

JavaScript:

$('#mySlider').slider({        
    min: -1,
    max: 1,
    value: 0,
    step: 0.1,
    slide: function () {
        // do stuff
    }
});

---

HTML:

---

我尝试了其他一些答案，但似乎没有一个能自己解决问题。这使滑块的范围和其余部分的颜色相同：

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

将为所有滑块的整个范围着色。

---

必要时进行限制。

为滑块的div指定样式， 记得给背景图片：无； 然后给你想要的颜色

CSS

HTML

---

出于您的目的，您必须使jQuery滑块背景透明，并直接在容器元素中设置背景颜色。 大概是这样的：

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

---

这会将滑块背景颜色设置为您的颜色，并覆盖任何jQuery滑块CSS颜色

答案是在设置自己的颜色之前将背景图像设置为“无”。使用chrome元素检查查找类名

不，那似乎不起作用。当页面加载时，它似乎是临时应用了颜色，我想其他的东西会覆盖它（jquery ui中可能有css？）你能链接到一个实时演示吗？所以我可以用Firebug查看吗？@DotnetDude，可能值得以内联方式使用上面的内容（首先），看看这是否可以防止它被过度使用。除此之外，使用Firebug（或Chrome的开发工具，或Dragonfly…等）查看样式的分配/继承位置。非常有用，谢谢！你知道如何用不同的颜色给滑块范围的三个部分上色吗？

if(true){
  $('.ui-slider2-range').css('background-color','red');
}else {
  $('.ui-slider2-range').css('background-color','green');
}

#slider-range{
    background-color: rgba(187,145,19,0.2);
    background-image: none;
}

 <div id="slider-range" style="width:430px;"></div>

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

if(true){
  $('.ui-slider2-range').css('background-color','red');
}else {
  $('.ui-slider2-range').css('background-color','green');
}