如何解决使用 setOptions 动态更改属性后剑道滑块的问题
我在页面上有一个剑道滑块，其最小值/最大值设置为 0 和 100。此滑块的最小值/最大值是可变的，并且会根据用户在下拉列表中选择的内容而变化。例如，当用户在下拉列表中选择一个项目时，我使用 setoptions 更改滑块的最小值/最大值 10 和 50。
var slider = $("#slider").data("kendoSlider");
slider.setoptions({
min: 10,max: 50,smallStep: 1,largeStep: 5,value: 10
});
slider.resize();
这似乎在滑块更新到我在 setoptions 中设置的属性时起作用。但是，在我执行此操作后，它并没有始终让我跳转到滑块中的值。
例如，如果我尝试点击 40 处的滑块线，滑块将不会移动到它。有时会，有时不会。如果我将滑块球拖动到一个数字，它可以正常工作，如果我使用增加/减少箭头按钮，它可以正常工作。但是点击滑动条中的数字不起作用。
在我使用 setoptions
无论我使用 setoptions 更改滑块中的什么属性，都会出现此问题
有什么想法吗？谢谢。
解决方法
我建议使用 min (documentation) 和 max (documentation) 方法为选项赋予新值。
通过使用这些方法，滑块可以使用它们各自新的最小/最大配置值正常工作。
这是我根据 KendoNumericUpDowns 设置最小/最大配置值的示例：
<head>
<meta charset="utf-8">
<title>Slider Example</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.mobile.all.min.css">
</head>
<body>
<input id="min" />
<input id="max" />
<input id="slider" />
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
<script>
$(document).ready(function() {
$('#min').kendoNumericTextBox({
decimals: 0,format: 'n0',label: 'Min',min: 1,restrictDecimals: true,round: true,value: 1,change: function() {
var value = parseInt(this.value());
var nud = $('#max').data('kendoNumericTextBox');
nud.min(value + 1);
if (nud.value() < nud.min()) {
nud.value(value + 1);
}
nud.trigger('change');
var slider = $("#slider").data('kendoSlider');
slider.min(value);
if (slider.value() < slider.min()) {
slider.value(value);
}
}
});
$('#max').kendoNumericTextBox({
decimals: 0,label: 'Max',min: 2,value: 2,change: function() {
var value = this.value();
$("#slider").data('kendoSlider').max(value);
}
});
$("#slider").kendoSlider({
min: 1,max: 2
});
});
</script>
</body>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
