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中找到了这个：

打开开发人员工具
选择“元素”选项卡，然后使用放大镜工具
在“计算样式”中查找background-color，然后使用小三角形展开
点击右侧的链接（例如jquery-ui.css:62）查看相关的css行
复制该行并将其放在样式表中，并附上您喜欢的内容

Answer 4

认为这些值可能对以后阅读此主题的人有用。这些设置在jQuery Slider中使用，有2个滑块。第h

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

BETWEEN 2 MARKER COLOR

#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

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

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

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

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似乎很有希望，但没有取得任何成果（除非明显地翻转周围的彩色区域）。

这很奇怪。

Answer 7

CSS：

与Classes一起使用：

.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>

Answer 8

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

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

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>

Answer 10

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

Answer 11

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

Answer 12

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

});

重要的是range: "max"显示滑块增加顺序的背景，如果需要减少然后使用"min"并且在主题css .ui-widget-content属性中必须使用所需的颜色，如{{1} }}

更改JQuery滑块的背景颜色

12 个答案: