Есть такой вот слайдер:
// Значения
var sliderVariables = {
minValue: parseInt( $( ".price-slider__min" ).data( "range-slider-min" ) , 10 ),
maxValue: parseInt( $( ".price-slider__max" ).data( "range-slider-max" ) , 10 )
}
// Инициализация слайдера
$( ".price-slider" ).slider({
range: true,
min: sliderVariables.minValue,
max: sliderVariables.maxValue,
values: [ sliderVariables.minValue, sliderVariables.maxValue ],
slide: function( event, ui ) {
$( ".price-slider__min" ).attr( "value", ui.values[0] );
$( ".price-slider__max" ).attr( "value", ui.values[1] );
}
});
// Инициализация начальных значений
$( ".price-slider__min" ).attr( "value", $( ".price-slider" ).slider( "values", 0 ) );
$( ".price-slider__max" ).attr( "value", $( ".price-slider" ).slider( "values", 1 ) );
А так же есть два события, которые изменяют положение ползунков в зависимости от введённых значений пользователем:
// Изменение положения ползунков в зависимости от значения поля (мин)
$( document ).on( "change", ".price-slider__min", function() {
changePriceSliderFieldMin( $( this ) );
});
function changePriceSliderFieldMin( field ) {
if (
( field.attr( "value" ) > sliderVariables.maxValue )
|| ( field.attr( "value" ) > $( ".price-slider" ).slider( "values", 1 ) )
) {
field.attr( "value", $( ".price-slider" ).slider( "values", 1 ) );
$( ".price-slider" ).slider( "values", 0, $( ".price-slider" ).slider( "values", 1 ) );
} else if ( field.attr( "value" ) < sliderVariables.minValue ) {
$( ".price-slider" ).slider( "values", 0, sliderVariables.minValue );
} else {
$( ".price-slider" ).slider( "values", 0, field.attr( "value" ) );
}
}
// Изменение положения ползунков в зависимости от значения поля (макс)
$( document ).on( "change", ".price-slider__max", function() {
changePriceSliderFieldMax( $( this ) );
});
function changePriceSliderFieldMax( field ) {
if (
( field.attr( "value" ) < sliderVariables.minValue )
|| ( field.attr( "value" ) < $( ".price-slider" ).slider( "values", 0 ) )
) {
field.attr( "value", $( ".price-slider" ).slider( "values", 0 ) );
$( ".price-slider" ).slider( "values", 1, $( ".price-slider" ).slider( "values", 0 ) );
} else if ( field.attr( "value" ) > sliderVariables.maxValue ) {
field.attr( "value", sliderVariables.maxValue );
$( ".price-slider" ).slider( "values", 1, sliderVariables.maxValue );
} else {
$( ".price-slider" ).slider( "values", 1, field.attr( "value" ) );
}
}
Мне при AJAX-запросе нужно будет неоднократно обновлять min и max значения, а так же реинициализировать сам слайдер. Можно как то
Пример кода 1 обернуть в функцию (для простого вызова и обновления переменных в ней), чтобы в других функциях (changePriceSliderFieldMax и changePriceSliderFieldMin) не было проблем получения данных из $slider?