我现在正在计算。例如，当我们在750的左侧块中更改数字宽度时，在右侧块中我们将看到900，但是当我们在2000年改变左侧块的长度数量时，在右侧块中我们也将看到2000.如何组合两个滑块？这个滑块现在是独立的。
$(document).ready(function() {
$("#mySlider").slider({
range: "min",
min: 0,
max: 750,
value: 750,
slide: function(event, ui) {
$("#total").val(ui.value);
}
});
$("#total").val($("#mySlider").slider("value"));
$("#rangeSlider").slider({
orientation: "vertical",
range: "min",
min: 0,
max: 3000,
value: 3000,
slide: function(event, ui) {
$("#tot").val(ui.value);
}
});
$("#tot").val($("#rangeSlider").slider("value"));
$("#mySlider1").slider({
range: "min",
min: 0,
max: 900,
value: 900,
slide: function(event, ui) {
$("#total1").val(ui.value);
}
});
$("#total1").val($("#mySlider1").slider("value"));
$("#rangeSlider1").slider({
orientation: "vertical",
range: "min",
min: 0,
max: 3000,
value: 3000,
slide: function(event, ui) {
$("#tot1").val(ui.value);
}
});
$("#tot1").val($("#rangeSlider1").slider("value"));
});<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" rel="stylesheet" />
<div class="before" style="display: inline-block; margin-right: 20px;">
<p>
<label for="tot"> Length:</label>
<input type="text" id="tot" style="border:0; color:#fa4b2a; font-weight:bold;">
</p>
<div id="rangeSlider" style="height:250px; display: inline-block;"></div>
<img src="123.png" alt="">
<p>
<label for="total">Width:</label>
<input type="text" id="total" style="border:0; color:#fa4b2a; font-weight:bold;">
</p>
<div id="mySlider" style="width: 230px"></div>
</div>
<div class="after" style="display: inline-block;">
<p>
<label for="tot1"> Length:</label>
<input type="text" id="tot1" style="border:0; color:#fa4b2a; font-weight:bold;">
</p>
<div id="rangeSlider1" style="height:250px; display: inline-block;"></div>
<img src="123.png" alt="">
<p>
<label for="total1">Width:</label>
<input type="text" id="total1" style="border:0; color:#fa4b2a; font-weight:bold;">
</p>
<div id="mySlider1" style="width: 230px"></div>
</div>
答案 0 :(得分：0)
您可以使用值设置器$( ".selector" ).slider( "option", "value", 10 );
以下是您的示例的工作代码
$(document).ready(function() {
var $total = $("#total");
var $total1 = $("#total1");
var $tot = $("#tot");
var $tot1 = $("#tot1");
var mySlider = $( "#mySlider" ).slider({
range: "min",
min: 0,
max: 750,
value: 750,
slide: function( event, ui ) {
mySlider1.slider( "option", "value", ui.value + 150 );
$total.val( ui.value );
},
change: function(event, ui){
$total.val( ui.value );
}
});
$total.val( mySlider.slider( "value" ) );
var mySlider1 = $( "#mySlider1" ).slider({
range: "min",
min: 0,
max: 900,
value: 900,
slide: function( event, ui ) {
mySlider.slider( "option", "value", ui.value - 150 );
$total1.val( ui.value );
},
change: function(event, ui){
$total1.val( ui.value );
}
});
$total1.val( mySlider1.slider( "value" ) );
var rangeSlider = $( "#rangeSlider" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 3000,
value: 3000,
slide: function( event, ui ) {
$tot.val( ui.value );
rangeSlider1.slider("option","value", ui.value);
},
change: function(event, ui){
$tot.val( ui.value );
}
});
$tot.val( rangeSlider.slider( "value" ) );
var rangeSlider1 = $( "#rangeSlider1" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 3000,
value: 3000,
slide: function( event, ui ) {
$tot1.val( ui.value );
rangeSlider.slider("option","value", ui.value);
},
change: function(event, ui){
$tot1.val( ui.value );
}
});
$tot1.val( rangeSlider1.slider( "value" ) );
function updateInput(e, slider){
slider.slider( "option", "value", $(e.target).val() );
}
$total.on('keyup keydown',function(e){
updateInput(e, mySlider);
});
$total1.on('keyup keydown',function(e){
updateInput(e, mySlider1);
});
$tot.on('keyup keydown',function(e){
updateInput(e, rangeSlider);
});
$tot1.on('keyup keydown',function(e){
updateInput(e, rangeSlider1);
});
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<title>jQuery UI : Slider with Minimum Range</title>
</head>
<body>
<div class="before" style="display: inline-block; margin-right: 20px;">
<p>
<label for="tot"> Length:</label>
<input type="text" id="tot" style="border:0; color:#fa4b2a; font-weight:bold;">
</p>
<div id="rangeSlider" style="height:250px; display: inline-block;"></div>
<img src="123.png" alt="">
<p>
<label for="total">Width:</label>
<input type="text" id="total" style="border:0; color:#fa4b2a; font-weight:bold;">
</p>
<div id="mySlider" style="width: 230px"></div>
</div>
<div class="after" style="display: inline-block;">
<p>
<label for="tot1"> Length:</label>
<input type="text" id="tot1" style="border:0; color:#fa4b2a; font-weight:bold;">
</p>
<div id="rangeSlider1" style="height:250px; display: inline-block;"></div>
<img src="123.png" alt="">
<p>
<label for="total1">Width:</label>
<input type="text" id="total1" style="border:0; color:#fa4b2a; font-weight:bold;">
</p>
<div id="mySlider1" style="width: 230px"></div>
</div>
R
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</body>
</html>的jsbin