CSS 滑动时更改 jquery ui 滑块的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8723633/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing the color of a jquery ui slider as you slide it
提问by David
I've been looking around for an answer on how to do this and I can't seem to figure it out (even looking at the jquery ui themeing documentation). As I move the slider from left to right, I want the section on the left side of the slider-knob to change to orange (instead of the default grey).
我一直在寻找有关如何执行此操作的答案，但似乎无法弄清楚（甚至查看 jquery ui 主题文档）。当我从左向右移动滑块时，我希望滑块旋钮左侧的部分变为橙色（而不是默认的灰色）。
The jquery theme-roll generated the css below. Presumably the .ui-widget-header background-color would control this, but it does't seem to. Neither does adding a background color to any other class. Any idea how I fix this so that as you slide horizontally you get a different color?
jquery theme-roll 生成了下面的 css。大概 .ui-widget-header 背景颜色会控制这一点，但它似乎没有。也不会向任何其他类添加背景颜色。知道我如何解决这个问题，以便在水平滑动时获得不同的颜色吗？
JQUERY:
查询：
$(document).ready(function(){
$("#tasks_time").slider({
value: 1,
min: 0,
max: 72,
step: 1,
slide: function() {
update();
}
});
$("#tasks_done").slider({
value: 5,
min: 0,
max: 1000,
step: 10,
slide: function() {
update();
}
});
HTML:
HTML：
Finish these items in <span id="curr-tasks_time" class="calc_number">1</span> hours
<div id="tasks_time">
</div>
CSS:
CSS：
.ui-widget-content { border: 1px solid #ccc; background: #ff9900 url(images/ui-bg_flat_100_ff9900_40x100.png) 50% 50% repeat-x; color: #222222; }
.ui-widget-header { border: 1px solid #aaaaaa; background: #797979 url(images/ui-bg_highlight-soft_75_797979_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; }
.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }
.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0;}
Here's an example
这是一个例子
Thanks in advance for your help!
在此先感谢您的帮助！
回答by Aram Mkrtchyan
ther is a example
有一个例子
http://jsfiddle.net/amkrtchyan/EAaLK/2/
http://jsfiddle.net/amkrtchyan/EAaLK/2/
and a jquery code......
和一个 jquery 代码......
$( "#tasks_time" ).slider({
range: "min",
value: 37,
min: 1,
max: 700,
slide: function() {
update();
}
});
回答by Annie Trubak
Aram's answer didn't work for me. Also the jsfiddle demo doesn't seem to do what it's supposed to. Here is a more advanced version that does work, and includes multiple colors.
Aram 的回答对我不起作用。此外，jsfiddle 演示似乎没有做它应该做的。这是一个更高级的版本，它确实有效，并且包含多种颜色。
You can fiddle with it and set as many colors and combinations as you'd like:
您可以摆弄它并设置任意数量的颜色和组合：
The HTML:
HTML：
<p>A Colored jQuery UI Slider</p>
<div id="coloredSlider"></div>
The CSS:
CSS：
body {
font-family: Arial, Helvetica, sans-serif;
}
#coloredSlider {
float: left;
clear: left;
width: 600px;
margin: 15px;
}
#coloredSlider .ui-slider-range {
background: #ff0000;
}
#coloredSlider .ui-state-default, .ui-widget-content .ui-state-default {
background: none;
background-color: #FFF;
}
The Javascript:
Javascript：
function getTheColor( colorVal ) {
var theColor = "";
if ( colorVal < 50 ) {
myRed = 255;
myGreen = parseInt( ( ( colorVal * 2 ) * 255 ) / 100 );
}
else {
myRed = parseInt( ( ( 100 - colorVal ) * 2 ) * 255 / 100 );
myGreen = 255;
}
theColor = "rgb(" + myRed + "," + myGreen + ",0)";
return( theColor );
}
function refreshSwatch() {
var coloredSlider = $( "#coloredSlider" ).slider( "value" ),
myColor = getTheColor( coloredSlider );
$( "#coloredSlider .ui-slider-range" ).css( "background-color", myColor );
$( "#coloredSlider .ui-state-default, .ui-widget-content .ui-state-default" ).css( "background-color", myColor );
}
$(function() {
$( "#coloredSlider" ).slider({
orientation: "horizontal",
range: "min",
max: 100,
value: 0,
slide: refreshSwatch,
change: refreshSwatch
});
});
回答by Arun Maharana
$(function() {
$( "#slider" ).slider({
min: 0,
max: 100,
slide: function( event, ui ) {
$("#slider").css('background', 'linear-gradient(90deg, #c75f04 '+ui.value+'%, #cccccc 0%)');
$( "#price" ).val( "$" + ui.value);
}
});
});<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div id = "slider"></div><br>
Price : <input id="price">回答by Unkown
Try this:
尝试这个：
.ui-widget-content { background: purple; }
As a bonus, if you want to change the color of the little drag handle, use this:
作为奖励，如果您想更改小拖动手柄的颜色，请使用以下命令：
.ui-widget-content .ui-state-default { background: chartreuse; }
