我一直在寻找关于如何做到这一点的答案,我似乎无法弄明白(甚至看看jquery ui主题文档)。当我从左向右移动滑块时,我希望滑块旋钮左侧的部分变为橙色(而不是默认的灰色)。
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:
Finish these items in <span id="curr-tasks_time" class="calc_number">1</span> hours
<div id="tasks_time">
</div>
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;}
提前感谢您的帮助!
答案 0 :(得分:16)
是一个例子
http://jsfiddle.net/amkrtchyan/EAaLK/2/
和jquery代码......
$( "#tasks_time" ).slider({
range: "min",
value: 37,
min: 1,
max: 700,
slide: function() {
update();
}
});
答案 1 :(得分:5)
Aram的回答对我不起作用。此外,jsfiddle演示似乎没有做到它应该做的事情。 这是一个更高级的版本,它可以工作,并包含多种颜色。
您可以随意设置它并根据需要设置多种颜色和组合:
HTML:
<p>A Colored jQuery UI Slider</p>
<div id="coloredSlider"></div>
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;
}
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
});
});
答案 2 :(得分:2)
试试这个:
.ui-widget-content { background: purple; }
作为奖励,如果你想改变小拖拽手柄的颜色,请使用:
.ui-widget-content .ui-state-default { background: chartreuse; }
答案 3 :(得分:1)
$(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">