How to properly wrap jqueryUI slider initialization?

Question

JavaScript

There is this slider:

// Значения
    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 ) );

And there are also two events that change the position of the sliders depending on the values ​​entered by the user:

// Изменение положения ползунков в зависимости от значения поля (мин)
      $( 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" ) );
      }
    }

With an AJAX request, I will need to repeatedly update the min and max values, as well as reinitialize the slider itself. Is it possible to somehow wrap Code Example 1 in a function (for a simple call and update of variables in it), so that other functions (changePriceSliderFieldMax and changePriceSliderFieldMin) do not have problems getting data from $slider?

Answer 1

First
, jQuery = $.noConflict(); // remove the jQ global, do it immediately after the request to the jquery.min.js file
Some of the ancient grandfathers of our profession loved to poke their main library into a dollar. It doesn't matter if it's jquery or not. It happens that two libraries one replaces the other and then both do not work.
then like this:

(function ($, App) {
  // ваш код
  $(function () {
    // ваш код после DOM-ready
  });
})(jQuery, App = window.App || {});

* here you will have a global variable App in which you can put something. For example, ready-made sliders or other important things, so that later they can be output to the console or linked to each other
* it is important to remember that the height of some elements with overflow: hidden will appear only a few seconds after the page loads, when all elements have been rendered. That is, even ondomready does not save - you need to delay for a couple of seconds or cry to the jQuery developers forum, it's time to do this already
* sometimes it's useful to work with onload <script src="">to catch the event when the script is connected to the site, but even before the ondomready is finished
* and I see in your $(document).change() code - I don’t know what exactly is happening there, you need to look, but I would only hang two things on $(document) (only two in general) - mousemove, mouseup - if they are required. Mousemove - all kinds of sliders, mouseup - releasing the previously held mouse button for a hasty user who likes to move the mouse while holding the button.
Hanging onchange on the document... I wonder how many hundreds of times your action is executed?