@qbk17

Как правильно обернуть инициализацию jqueryUI слайдера?

Есть такой вот слайдер:
// Значения
		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?
  • Вопрос задан
  • 189 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы