更改 JQuery 滑块的背景颜色

Change background color of JQuery slider

提问by DotnetDude

I understand I can set the background color of the value from min to the current slider selection by doing a:

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

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

How do I set the background color for the entireslider (not just from the min or max to the selected value)

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

回答by Bruce Chu

i tried some of the other answers, but none of them seemed to work by themselves. this worked for me to get both the range and the rest of the slider to be the same color:

我尝试了其他一些答案，但它们似乎都不起作用。这对我有用，使滑块的范围和其余部分都具有相同的颜色：

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

回答by chris

an image is applied by the jquery ui css, which hides any background-color applied to the slider elements. simply specify background-image as none in your own style after jquery css is loaded. i'm trying to dynamically set the color of ui-slider-range (per slider on html page) depending on ui.value, and not having much luck setting it in slide option during slider creation.

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

回答by Grumdrig

This seems like it might impact other UI elements if you have them, but in my case it's not a problem, and this worked:

如果您拥有它们，这似乎可能会影响其他 UI 元素，但在我的情况下，这不是问题，并且有效：

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

As a bonus, if you want to change the color of the little drag handle, use:

作为奖励，如果要更改小拖动手柄的颜色，请使用：

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

(The color scheme presented is for demonstration purposes only. :)

（呈现的配色方案仅用于演示目的。:)

NOTE: I figured this out in Chrome using the following procedure:

注意：我使用以下程序在 Chrome 中发现了这一点：

1. Open Developer Tools
2. Pick the Elements tab, and select the slider background with the magnifying glass tool
3. Find background-colorin the "Computed Styles" and expand it with the little triangle
4. Click the link (e.g. jquery-ui.css:62) on the right side to see the relevant line of css
5. Copy that line and place it in your stylesheet, with content you like

1. 打开开发者工具
2. 选择 Elements 选项卡，然后使用放大镜工具选择滑块背景
3. 查找background-color在“计算样式”，并与小三角形展开
4. 点击jquery-ui.css:62右侧的链接（如）查看css相关行
5. 复制该行并将其放入您的样式表中，并包含您喜欢的内容

回答by oceanician

Thought these values might be useful for people reading this topic later. These settings were used within a jQuery Slider, with 2 sliders on. Hth.

认为这些值可能对稍后阅读此主题的人有用。这些设置在 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;}

GENERAL SLIDER BACKGROUND

一般滑块背景

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

BETWEEN 2 MARKER COLOUR

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

回答by Jason

For your purpose you have to make jQuery slider background transparent and set the background color directly in your container element. Something like this:

为了您的目的，您必须使 jQuery 滑块背景透明并直接在容器元素中设置背景颜色。像这样的东西：

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

This will set the slider background color to your color and override any jQuery slider CSS color.

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

回答by David says reinstate Monica

I haven't looked, but I'd guess that:

我没看过，但我猜是：

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

would work. Assuming that the #sliderelement is what I think it is.

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

---

---

Edited:编辑：

Sorry for taking so long on this, having looked at the jQueryUI's demos (particularly for the color-picker: http://jqueryui.com/demos/slider/#colorpicker) it seems that the background-colorproperty seems to be applied via additional classes applied to the element.

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

Changing the class from ui-slider-rangeto ui-slider-range-maxseemed promising, but achieved nothing (except from, perhaps, the obvious flipping the coloured area around).

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

This is weird.

这很奇怪。

回答by BKH

CSS:

CSS：

• Use this with Classes:

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

• or this for IDs:

  #mySlider { background: #000000; }
  

• 将此与类一起使用：

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

• 或者这对于 ID：

  #mySlider { background: #000000; }
  

---

---

JavaScript:

JavaScript：

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

---

---

HTML:

HTML：

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

回答by jank

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

will color the entire range of all sliders. Restrict if necessary.

将为所有滑块的整个范围着色。必要时加以限制。

回答by Ramyz

give style to the div of the slider, remember to give background-image: none; and then give colour u want!!

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

CSS

CSS

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

HTML

HTML

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

回答by Dimitri

The answer to this is setting background image to none before setting up your own color. Find the class name with element inspection with chrome!

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