我试图用jQuery UI滑块的工作，我可以有多个句柄：
$(function () {
var handlers = [25, 50, 75];
$("#slider").slider({
min: 0,
max: 100,
values: handlers,
slide: function (evt, ui) {
for (var i = 0, l = ui.values.length; i < l; i++) {
if (i !== l - 1 && ui.values[i] > ui.values[i + 1]) {
return false;
}
else if (i === 0 && ui.values[i] < ui.values[i - 1]) {
return false;
}
}
}
});
});
请注意，一个处理程序不能重叠，我将需要动态设置负载的处理程序，并保存在变化的处理位置。
我试图完成的事情是要上色的UI内容betweent的处理程序，以不同的颜色。 我已附加了一个图像。
请指教，如果这是可能的。
一种可能性是在滑块背景设定为CSS梯度和更新梯度停止在代码当滑块值的变化：
$(function () {
// the code belows assume the colors array is exactly one element bigger
// than the handlers array.
var handlers = [25, 50, 75];
var colors = ["#ff0000", "#00ff00", "#0000ff", "#00ffff"];
updateColors(handlers);
$("#slider").slider({
min: 0,
max: 100,
values: handlers,
slide: function (evt, ui) {
updateColors(ui.values);
}
});
function updateColors(values) {
var colorstops = colors[0] + ", "; // start left with the first color
for (var i=0; i< values.length; i++) {
colorstops += colors[i] + " " + values[i] + "%,";
colorstops += colors[i+1] + " " + values[i] + "%,";
}
// end with the last color to the right
colorstops += colors[colors.length-1];
/* Safari 5.1, Chrome 10+ */
var css = '-webkit-linear-gradient(left,' + colorstops + ')';
$('#slider').css('background-image', css);
}
});
http://jsfiddle.net/LLfWd/60/
此代码适用于Chrome和Safari。 我的猜测是，你只需要生成多个梯度字符串（-moz-线性渐变，-MS-线性渐变，等...）我是做-webkit-线性渐变来这里的路上。
（⌐■_■）你好，附下面器具我的代码（ⅰ）3 JQuery用户界面滑块处理这意味着4个范围，（II）范围内的值的非碰撞，（ⅲ）的范围的着色，（IV）标题工具提示上处理和（v）范围的值的显示。 请注意，我使用的是旧版本的JQuery。 此外，它有一个图案，这意味着它可以容易被重新编码以支持> = 4个把手优雅为好。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Slider</title>
<link type="text/css" href="css/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
</head>
<body>
<style>
div.demo { padding: 10px !important; };
</style>
<div class="demo">
<p>
<label>% Style:</label>
<input type="text" id="weightage_style" style="border:0; color:#f6931f; font-weight:bold;" />
<br />
<label>% Design:</label>
<input type="text" id="weightage_design" style="border:0; color:#f6931f; font-weight:bold;" />
<br />
<label>% Correctness:</label>
<input type="text" id="weightage_correctness" style="border:0; color:#f6931f; font-weight:bold;" />
<br />
<label>% Others:</label>
<input type="text" id="weightage_others" style="border:0; color:#f6931f; font-weight:bold;" />
<br />
</p>
<div id="weightage_slider" style="font-size:12px;width:300px;"></div>
</div>
<script>
$( "#weightage_slider" ).slider({
min: 0,
max: 100,
orientation: "horizontal",
step: 1,
values: [ 10, 40, 90 ], // set three handles
slide: function( event, ui ) {
// NOTE: during slide, the following sequence occurs: (i) change ui.value (ii) call this function (iii) move the slider handle
// these four lines update the display of handle ranges
$( "#weightage_style" ).val( "0" + " - " + $( "#weightage_slider" ).slider('values', 0) );
$( "#weightage_design" ).val( $( "#weightage_slider" ).slider('values', 0) + " - " + $( "#weightage_slider" ).slider('values', 1) );
$( "#weightage_correctness" ).val( $( "#weightage_slider" ).slider('values', 1) + " - " + $( "#weightage_slider" ).slider('values', 2) );
$( "#weightage_others" ).val( $( "#weightage_slider" ).slider('values', 2) + " - " + "100" );
if ( ui.handle == $( "#weightage_slider_0" ).get(0) ) {
if(ui.values[ 0 ] >= ui.values[ 1 ]){
$( "#weightage_slider" ).slider('values', 0, ui.values[ 1 ]); // triggers change event
return false;
} else {
// handle-0 will move
// update display of colored handle ranges
$( "#weightage_slider_a" ).css('left', '0%');
$( "#weightage_slider_a" ).css('width', (ui.values[ 0 ] + '%'));
$( "#weightage_slider_b" ).css('left', (ui.values[ 0 ] + '%'));
$( "#weightage_slider_b" ).css('width', ((ui.values[1] - ui.values[0]) + '%'));
}
}
if ( ui.handle == $( "#weightage_slider_1" ).get(0) ) {
if(ui.values[ 1 ] <= ui.values[ 0 ]){
$( "#weightage_slider" ).slider('values', 1, ui.values[ 0 ]); // triggers change event
return false;
}else if(ui.values[ 1 ] >= ui.values[ 2 ]){
$( "#weightage_slider" ).slider('values', 1, ui.values[ 2 ]); // triggers change event
return false;
}else{
// handle-1 will move
// update display of colored handle ranges
$( "#weightage_slider_b" ).css('left', (ui.values[ 0 ] + '%'));
$( "#weightage_slider_b" ).css('width', ((ui.values[1] - ui.values[0]) + '%'));
$( "#weightage_slider_c" ).css('left', (ui.values[ 1 ] + '%'));
$( "#weightage_slider_c" ).css('width', ((ui.values[2] - ui.values[1]) + '%'));
}
}
if ( ui.handle == $( "#weightage_slider_2" ).get(0) ) {
if(ui.values[ 2 ] <= ui.values[ 1 ]){
$( "#weightage_slider" ).slider('values', 2, ui.values[ 1 ]); // triggers change event
return false;
} else{
// handle-2 will move
// update display of colored handle ranges
$( "#weightage_slider_c" ).css('left', (ui.values[ 1 ] + '%'));
$( "#weightage_slider_c" ).css('width', ((ui.values[2] - ui.values[1]) + '%'));
$( "#weightage_slider_d" ).css('left', (ui.values[ 2 ] + '%'));
$( "#weightage_slider_d" ).css('width', ((100 - ui.values[2]) + '%'));
}
}
},
change: function( event, ui ) {
// because slide event has function that changes handles' value programmatically, the following is necessary
// these four lines update the display of handle ranges
$( "#weightage_style" ).val( "0" + " - " + $( "#weightage_slider" ).slider('values', 0) );
$( "#weightage_design" ).val( $( "#weightage_slider" ).slider('values', 0) + " - " + $( "#weightage_slider" ).slider('values', 1) );
$( "#weightage_correctness" ).val( $( "#weightage_slider" ).slider('values', 1) + " - " + $( "#weightage_slider" ).slider('values', 2) );
$( "#weightage_others" ).val( $( "#weightage_slider" ).slider('values', 2) + " - " + "100" );
// update display of colored handle ranges
$( "#weightage_slider_a" ).css('left', '0%');
$( "#weightage_slider_a" ).css('width', (ui.values[ 0 ] + '%'));
$( "#weightage_slider_b" ).css('left', (ui.values[ 0 ] + '%'));
$( "#weightage_slider_b" ).css('width', ((ui.values[1] - ui.values[0]) + '%'));
$( "#weightage_slider_c" ).css('left', (ui.values[ 1 ] + '%'));
$( "#weightage_slider_c" ).css('width', ((ui.values[2] - ui.values[1]) + '%'));
$( "#weightage_slider_d" ).css('left', (ui.values[ 2 ] + '%'));
$( "#weightage_slider_d" ).css('width', ((100 - ui.values[2]) + '%'));
}
});
// label each slider handle
$( "#weightage_slider > a" ).each(function(index){
$(this).attr('id', 'weightage_slider_' + index);
$(this).attr('title', 'slider handle ' + index);
});
// the following four div tags result in the display of colored handle ranges
// the following left attributes and width attributes should be consistent with slider initialization - values array
$('#weightage_slider').append("<div id='weightage_slider_a' class='ui-slider-range' style='left:0%;width:10%;background-color:#41d862;'></div>");
$('#weightage_slider').append("<div id='weightage_slider_b' class='ui-slider-range' style='left:10%;width:30%;background-color:#41b7d8;'></div>");
$('#weightage_slider').append("<div id='weightage_slider_c' class='ui-slider-range' style='left:40%;width:50%;background-color:#d841b7;'></div>");
$('#weightage_slider').append("<div id='weightage_slider_d' class='ui-slider-range' style='left:90%;width:10%;background-color:#d86241;'></div>");
// these four lines display the initial handle ranges
$( "#weightage_style" ).val( "0" + " - " + $( "#weightage_slider" ).slider('values', 0) );
$( "#weightage_design" ).val( $( "#weightage_slider" ).slider('values', 0) + " - " + $( "#weightage_slider" ).slider('values', 1) );
$( "#weightage_correctness" ).val( $( "#weightage_slider" ).slider('values', 1) + " - " + $( "#weightage_slider" ).slider('values', 2) );
$( "#weightage_others" ).val( $( "#weightage_slider" ).slider('values', 2) + " - " + "100" );
</script>
</body>
错误：如果手柄被拖动到最左边，就成为“套牢”，所以你可能希望有一个复位按钮，恢复把手位置。
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://i.stack.imgur.com/UfZLn.png', '推荐 叛逆 的文章《滑块与多个手柄和背景颜色内容(Slider with Multiple Handle and Bac》','https://www.manongdao.com/article-1008889.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}