更改 JQuery 滑块的背景颜色

Question

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

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

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

- DotnetDude

Answer 1

我尝试了其他答案，但是它们似乎都不能单独解决问题。以下方法可以让滑块的范围和剩余部分颜色相同：

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

- Bruce Chu

Answer 2

jQuery UI CSS应用了一个图像，它隐藏了应用于滑块元素的任何背景颜色。在加载jQuery CSS后，在您自己的样式中简单地指定background-image为none即可。 我正在尝试根据ui.value动态设置ui-slider-range（每个HTML页面上的滑块）的颜色，但在创建滑块时在slide选项中设置它并不成功。

- chris

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. 将该行复制并放置在您喜欢的样式表中

- Grumdrig

Answer 4

希望这些值对后来阅读此主题的人有所帮助。 这些设置是在jQuery Slider中使用的，其中有两个滑块。祝好。

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

在两个标记颜色之间

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

- oceanician

---

非常有用，谢谢！您有什么想法如何使滑块范围的三个部分呈现不同的颜色？ - Fr.

Answer 5

为了实现您的目的，您需要使 jQuery 滑块的背景透明，并直接在容器元素中设置背景颜色。示例如下：

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

这将会设置滑块的背景颜色为你所选择的颜色，并覆盖任何jQuery滑块CSS颜色。

- Jason

Answer 6

我还没有看过，但我猜想：

#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 似乎很有希望，但什么也没有实现（除了可能明显的翻转彩色区域）。

这很奇怪。

- David Thomas

---

不，那似乎不起作用。当页面加载时，颜色似乎被临时应用，我猜可能是其他东西覆盖了它（可能是jQuery UI中的CSS？） - DotnetDude

你能提供一个实时演示链接，这样我就可以用Firebug查看吗？ - David Thomas

@DotnetDude，也许值得尝试使用上述内联样式（首先）来查看是否可以防止其被覆盖。除此之外，使用Firebug（或Chrome的开发者工具，或Dragonfly...等）来查看样式是从哪里分配/继承的。 - David Thomas

Answer 7

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：

<div id="mySlider" class="sliderTestClass"></div>

- BKH

Answer 8

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

将会给所有滑块的整个范围着色。 必要时进行限制。

- jank

Answer 9

给滑块的 div 添加样式， 记得添加 background-image: none; 然后添加你想要的颜色！！

CSS

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

HTML

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

- Ramyz

Answer 10

解决方法是在设置自己的颜色之前将背景图像设置为无。使用Chrome的元素检查找到类名！

- Dimitri