不好意思，當初想做這個功能的時候，是第一次學習jQuery。查詢了很多網頁和問題，這幾天一直沒能實作。真的希望有人能幫助我！
我的想法是創建一個帶有兩個拇指的滑塊，如下面的視頻。當其中一個拇指移動時，另一個也會發生變化（如果一個是x另一個是y，則用戶輸入的值為a。那么兩者之間的關系可能是y = 2a-x）
我使用以下 .css 和 jQuery 來創建一個滑塊（洗掉了很??多無用的代碼）：
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$( function() {
$( "#myRange" ).slider({
range: false,
min: 0,
max: 200,
values: [80, 120],
slide: function( event, ui ) {
var x = ui.values[0];
var y = ui.values[1];
}
});
});
</script>
和
<input type="number"/>
<div id="myRange"></div>
uj5u.com熱心網友回復：
考慮以下。
$(function() {
$("#myRange").slider({
range: false,
min: -200,
max: 200,
values: [80, -80],
slide: function(event, ui) {
var x, y, a = parseInt($("#a").val());
if ($(".ui-slider-handle.ui-state-focus").index() == 0) {
x = ui.values[0];
y = (2 * a) - x;
$(this).slider("values", 1, y);
} else {
y = ui.values[1];
x = (2 * a) - y;
$(this).slider("values", 0, x);
}
$("#x-val").html(x);
$("#a-val").html(a);
$("#y-val").html(y);
}
});
});input[type='number'] {
width: 3em;
}
#myRange {
margin: 10px;
}
#myRange .ui-slider-handle:nth-of-type(1) {
margin-top: -10px;
}
#myRange .ui-slider-handle:nth-of-type(2) {
margin-top: 10px;
}
.log span {
margin-right: 0.25em;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<div class="ui-widget">
<div class="ui-widget-content" style="margin-bottom: 20px;">
<label for="a">Enter Number</label>
<input type="number" id="a" value="0" />
</div>
<div id="myRange"></div>
</div>
<div class="log">
<label>X:</label><span id="x-val">80</span><label>A:</label><span id="a-val">0</span><label>Y:</label><span id="y-val">120</span>
</div>其中棘手的部分是用戶可以抓住任一手柄。知道哪個句柄有焦點允許我們分配適當的值。
更新
你也可以把它收緊一點：
$(function() {
$("#myRange").slider({
range: false,
min: -200,
max: 200,
values: [80, -80],
slide: function(event, ui) {
var a = parseInt($("#a").val());
if ($(".ui-slider-handle.ui-state-focus").index() == 0) {
$(this).slider("values", 1, (2 * a) - ui.values[0]);
} else {
$(this).slider("values", 0, (2 * a) - ui.values[1]);
}
}
});
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/328507.html
標籤：javascript html 查询 css jquery-ui
上一篇：影像溢位flex專案