[英]implementing price range slider & reading the min, max values in jQuery
[英]How do I dynamically change min,max values for jquery ui slider?
所以我有一个页面,上面有一个jquery ui滑块,用以下内容初始化:
var min = $("#attrInformation").data("lowest_price"),
max = $("#attrInformation").data("highest_price");
$( "#slider-range" ).slider({
range: true,
min: min,
max: max,
values: [ min, max ],
slide: function( event, ui ) {
var start = ui.values[0],
end = ui.values[1];
$("#startPrice").text(start);
$("#endPrice").text(end);
},
stop: function(event,ui){
var start = ui.values[0],
end = ui.values[1];
refineObject.price_min = start;
refineObject.price_max = end;
refineResults(refineObject);
}
});
我希望能够根据ajax调用的结果更改最小值,最大值和两个句柄所在的值。 所以我尝试过这样的事情:
$.get("ajax.php",options,function(data){
$('.middle_container').html(data);
$('#slider-range').slider( "option", "min", $('.middle_container').find('.start_price').val() );
$('#slider-range').slider( "option", "max", $('.middle_container').find('.end_price').val() );
$('#slider-range').slider("value", $('#slider-range').slider("value"));
});
其中我的min和max包含在两个隐藏的div中,类为start_price
和end_price
。 这当前不起作用,它不会更新最高价格,并且滑块的右手柄出现在左侧位置上方。 关于如何使这项工作的任何建议? 我正在使用php作为后端。 start_price和end_price代码正常工作。
确保$('.middle_container').find('.start_price').val()
和$('.middle_container').find('.end_price').val()
返回正确的值。 另外,要设置滑块的值,您必须使用与设置最小/最大值相同的语法。 也
试试这个
$.get("ajax.php",options,function(data){
$('.middle_container').html(data);
$('#slider-range').slider( "option", "min", $('.middle_container').find('.start_price').val() );
$('#slider-range').slider( "option", "max", $('.middle_container').find('.end_price').val() );
$('#slider-range').slider( "option", "value", $('#slider-range').slider("value"));
});
首先销毁滑块,完全删除滑块功能。 这将使元素返回到其初始化前状态。
$("#selector").slider("destroy");
之后,您可以将新值添加到滑块,
$("#selector").slider({
range: "max",
min: 0, // min value
max: 200, // max value
step: 0.1,
value: 200, // default value of slider
slide: function(event, ui) {
$("#amount").val(ui.value);
}
});
这有效。
如果你想在输入值改变时这样做,你可以做这样的事情。
$('#inputid').focusout(function() {
// slider destroy and create as Shailesh showed
});
我打算使用keyup而不是焦点,但是根据你做的内部检查,你最终可能会多次重建你的滑块,这不会有什么好处,因为你不会使用它,直到你从输入继续。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.