jquery - 带有 2 个手柄的 jQuery UI 滑块 - 防止交叉
问题描述
我正在研究一个有 2 个句柄的 jQuery UI 滑块。我想让它使右手柄不能与左手柄交叉。它们都可以是相同的值(即它们的值都可以是 2),但右手柄的数字决不能小于左手柄的数字。这可能吗?
$(document).ready(function() {
$('#slider').slider({
min: 0,
max: 4,
step: .1,
values: [0, 4],
slide: function(event, ui) {
for (var i = 0; i < ui.values.length; ++i) {
$('input.value[data-index=' + i + ']').val(ui.values[i]);
}
}
});
$('input.value').change(function() {
var $this = $(this);
$('#slider').slider('values', $this.attr('data-index'), $this.val());
});
});
#slider {
margin-bottom:20px;
}
input[data-index="1"] {
float:right;
}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="slider"></div>
<div>
<input type="text" class="value" data-index="0" value="0" />
<input type="text" class="value" data-index="1" value="4" />
</div>
解决方案
您可以使用range: true
设置范围选项。您还可以使用 CSS 隐藏范围。例子:
$(document).ready(function() {
$('#slider').slider({
min: 0,
max: 4,
step: .1,
values: [0, 4],
range: true,
slide: function(event, ui) {
$.each(ui.values, function(i, v) {
$('input.value').eq(i).val(v);
});
}
});
$('input.value').change(function() {
var $this = $(this);
$('#slider').slider('values', $this.attr('data-index'), $this.val());
});
});
#slider {
margin-bottom: 20px;
}
#slider div.ui-slider-range {
background: transparent;
}
input[data-index="1"] {
float: right;
}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="slider"></div>
<div>
<input type="text" class="value" data-index="0" value="0" />
<input type="text" class="value" data-index="1" value="4" />
</div>
推荐阅读
- asp.net-mvc - 如何在 AD B2C 中为单个用户启用/强制执行 MFA
- javascript - 如何将类添加到动态表的元素?
- python - smart_run 第 117 行的 Instapy 错误导致失败
- python - 使用 flask.config.from_object() 时,Flask 在哪里寻找配置文件?
- c# - 如何在事件后填充 MatBlazor SelectItem?
- php - Laravel 8 测试失败(路线问题)
- python - 使用python从html中提取数据
- asp.net-core - 不允许使用 5.0 版。允许的版本类型有:majorVersion.x、majorVersion.minorVersion.x、majorVersion.minorVersion.patchVersion
- php - PHP 不会打开 fifo 进行写入
- fonts - 当字体的字符根据其周围的字母顺序改变形式时,它叫什么?