Как динамически изменять минимальные и максимальные значения для слайдера пользовательского интерфейса jquery?
Итак, у меня есть страница с ползунком пользовательского интерфейса jquery на ней, инициализированным следующим образом:
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 содержатся в двух скрытых разделениях с классом start_price
и end_price
. в настоящее время это не работает, максимальная цена не обновляется, и правая ручка ползунка отображается слева не на своем месте. есть какие-нибудь предложения о том, как это сделать? я использую php для серверной части. код start_price и end_price работает и корректен.
3 answers
Убедитесь, что $('.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 вместо фокусировки, но в зависимости от выполняемых вами внутренних проверок вы можете в конечном итоге перестроить свой слайдер много раз, что не принесет пользы, так как вы не будете использовать его, пока не перейдете от ввода.