我正在使用jQuery UI滑块开发范围滑块。为此,我必须满足以下条件:如果当前url包含特定字符串,它将触发create事件作为滑块的一部分,在该滑块中我需要动态设置值。
这是我的代码当前的样子:
<div class="controls">
<div id="price-range"></div>
<div class="textinputs">
<input id="price-min" type="text" value="2"/>
<input id="price-max" type="text" value="1050"/>
</div>
</div>
和JS:
if (window.location.href.indexOf("min-price") > -1) {
var url2 = window.location.href;
var newMinPrice= url2.replace( /[^0-9]/g, '' );
$('#price-range').slider({
range: true,
min: 0,
max: 1050,
values: [0, 1050],
create: function(event, ui){
$('#price-min').val(newMinPrice);
},
slide: function(event, ui) {
$('#price-min').val(ui.values[0]);
$('#price-max').val(ui.values[1]);
},
change: function( event, ui ) {
var minPrice = "min-price-" + ($('#price-min').val());
var maxPrice = "max-price-" + ($('#price-max').val());
$('.min-price a').text(minPrice);
$('.min-price a').trigger('click');
}
});
}
如您所见,我正在使用newMinPrice变量并将输入值设置为此。这可以正常工作,但是我的问题是,尽管它可以正确设置输入的值,但不会将滑块控件的位置更新到正确的位置。有人知道该怎么做吗?
最佳答案
尝试使用values
选项,该选项设置所有句柄的值。
例
$( ".selector" ).slider( "values", [ 55, 105 ] );
$('#price-range').slider({
range: true,
min: 0,
max: 1050,
values: [0, 1050],
create: function(event, ui) {
var minPrice = $('#price-min').val()
var maxPrice = $('#price-max').val()
$('#price-range').slider("values", [minPrice, maxPrice]);
},
slide: function(event, ui) {
$('#price-min').val(ui.values[0]);
$('#price-max').val(ui.values[1]);
},
change: function(event, ui) {
var minPrice = "min-price-" + ($('#price-min').val());
var maxPrice = "max-price-" + ($('#price-max').val());
$('.min-price a').text(minPrice);
$('.min-price a').trigger('click');
}
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="controls">
<div id="price-range"></div>
<div class="textinputs">
<input id="price-min" type="text" value="100" />
<input id="price-max" type="text" value="600" />
</div>
</div>
关于javascript - 在create事件中动态设置jQuery ui滑块值,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56855424/