jQuery UI Slider：具有3个手柄和可配置颜色的范围？
[英]jQuery UI Slider: Range with 3 handles, and configurable colors?
问题描述
I would like a jQuery UI slider that has five differently colored ranges defined by three handles. 
我想要一个jQuery UI滑块，它有五个不同颜色的范围，由三个手柄定义。 (So the first range would be handle 0 - handle 1, and the second range would be handle 1 to handle 2.) Is this possible through configuration, or must I hack it? （所以第一个范围是句柄0 - 句柄1，第二个范围是句柄1来处理2.）这可能通过配置，还是我必须破解它？ If I have to modify the source, is there any guidelines for how to go about doing that? 如果我必须修改源代码，是否有任何指导方针可以执行此操作？
Update : What I'm looking for in terms of ranges is: 更新 ：我在范围方面寻找的是：
| | --- color 1 ----- handle1 --------- color 2 ------------- handle2 ------- color3 --------- handle3 -----color 4 ----| ---颜色1 ----- handle1 ---------颜色2 ------------- handle2 ------- color3 ------ --- handle3 -----颜色4 ---- |
(hopefully that makes sense.) （希望这是有道理的。）
4 个解决方案
解决方案1
16 2012-03-14 19:49:59
The range option defined in the jquery ui slider documentation does indeed limit the slider to only 2 handles. jquery ui滑块文档中定义的range选项确实将滑块限制为仅2个句柄。 You need to create several elements when the slider raises the 'slide' or 'change' event and set the position of these manually, this way you can create a slider with multiple handles and multiple ranges which you can apply custom css to. 当滑块引发'slide'或'change'事件并手动设置这些元素的位置时，您需要创建多个元素，这样您就可以创建一个具有多个手柄和多个范围的滑块，您可以将自定义css应用到该滑块。 See fiddle for a working example. 请参阅小提琴，了解一个工作示例。
解决方案2
1 2011-01-19 04:30:37
You probably want to use a range slider and pass in an array of 3 values to create 3 handles (according to the docs): 您可能希望使用范围滑块并传入3个值的数组以创建3个句柄（根据文档）：
The slider widget will create handle elements with the class 'ui-slider-handle' on initialization.
解决方案3
0 2017-05-16 11:41:49
If you don't insist on jQuery UI, noUiSlider can give ranges different classes and supports multiple handles - just as you ask. 如果您不坚持使用jQuery UI， noUiSlider可以为范围提供不同的类并支持多个句柄 - 就像您要求的那样。 This example demonstrates how to color the ranges. 此示例演示如何为范围着色。
解决方案4
0 2018-08-30 19:19:06
Modified with onclick reset,please find the complete code. 通过onclick重置修改，请找到完整的代码。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Slider functionality</title>
<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>
<!-- Javascript -->
<style>
.slide {
margin-top: 20px;
margin-left: 20px;
width: 400px;
background: red;
}
.slide-back {
position:absolute;
height:100%;
}
</style>
</head>
<body>
<!-- HTML -->
<button class="button">submit</button>
<p>
<label for = "price">Price range:</label>
<input type = "text" id = "price"
style = "border:0; color:#b9cd6d; font-weight:bold;">
</p>
<div id = "slider-3"></div>
</body>
<script>
var doUpdate = function(event, ui) {
$('#slider-3 .slide-back').remove();
$($('#slider-3 a').get().reverse()).each(function(i) {
var bg = '#fff';
if(i == 1) {
bg = 'red';
} else if(i == 2) {
bg = 'yellow';
} else if(i == 3) {
bg = 'green';
}
$('#slider-3').append($('<div></div>').addClass('slide-back').width($(this).offset().left - 5).css('background', bg));
});
};
$(".button").click(function(){
$('#slider-3').slider({
slide: doUpdate,
change: doUpdate,
min: 0,
max: 100,
values: [ 10, 30, 20],
slide: function( event, ui ) {
$( "#price" ).val( ui.values[ 2 ] );
}
});
$( "#price" ).val( $( "#slider-3" ).slider( "values", 0 )
);
doUpdate();
});
$('#slider-3').slider({
slide: doUpdate,
change: doUpdate,
min: 0,
max: 100,
values: [ 10, 30, 20],
slide: function( event, ui ) {
$( "#price" ).val( ui.values[ 2 ] );
}
});
$( "#price" ).val( $( "#slider-3" ).slider( "values", 0 ) );
doUpdate();
</script>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.