编辑JQuery中滑块的CSS

我的网页上有一些滑块，我想更改其中一个滑块的颜色，但只更改选定的部分（例如，滑块的范围为0到100，按钮位于25，我只希望0-25为红色）

“我的滑块”在.html文件中使用以下内容：

<label for="slider-main">Main Slider: </label>
<input type="range" name="slider-main" id="slider-main" value="25" min="0" max="100" data-highlight="true"/>

主滑块：

何时应将颜色更改为红色的规则如下：

<script>
if (slider-main-value-one>slider-main-max)
{
$("#slider-main").css("background","red");
}
else
{
$("#slider-main").css("background","");
}
})
</script>

如果（滑块主值一>滑块主最大值）
{
$（“#主滑块”）.css（“背景”、“红色”）；
}
其他的
{
$（“#滑块主”）.css（“背景”，“主”）；
}
})

这只会更改标签的背景，而不会更改滑块

使用firebug和messing，我找到了需要更改的元素，以更改实际的滑块颜色

ui滑块bg ui btn活动ui btn角点全部

问题是，我不知道如何在JQuery中调用它

在firebug中，当标签改变颜色时，就会发生这种情况

<div class="ui-slider">    
<input id="slider-main" class="ui-input-text ui-body-a ui-corner-all ui-shadow-inset ui-slider-input" type="number" data-type="range" data-highlight="true" max="100" min="0" value="25" name="slider-main" style="background: none repeat scroll 0% 0% red;">

手动编辑firebug以更改滑块本身的颜色如下

<div class="ui-slider-track ui-btn-down-a ui-btn-corner-all" role="application">
<div class="ui-slider-bg ui-btn-active ui-btn-corner-all" style="width: 28%; background: red"></div>

这直接位于标签更改颜色的代码下方

总而言之，问题是，我如何从my.js（或从.html）调用类“ui slider bg ui btn active ui btn corner all”

谢谢大家!

亲切问候,

---

Gary

您可以在jQuery中使用此选择器访问元素：

$('.ui-slider-bg.ui-btn-active.ui-btn-corner-all')

或者您可以使用CSS（显然是相同的选择器）：

编辑：以下是工作代码：

$("#slider-main, #first-slider .ui-slider-bg.ui-btn-active.ui-btn-corner-all").css("background", "red");

---

.

您好，谢谢您的回复，太棒了！不幸的是，使用该选项会更改所有滑块，而不仅仅是此滑块（页面有5个滑块，我只希望主滑块在满足条件时更改颜色，即告诉用户滑块值太大）你能展示更多的HTML吗？也可以考虑为我们设置一个jsFoDeld.这是关于滑块的HTML：主调节器主滑块：/div >我现在要做的是设置一个jsFoDLE，但是以前从来没有使用过它，所以请忍受它。me@user2265237请看我上面的编辑，我已经添加了一个指向工作JSFIDLE的链接。

$("#slider-main, #first-slider .ui-slider-bg.ui-btn-active.ui-btn-corner-all").css("background", "red");