JQuery UI Slider практические заметки (документация) на русском

    Опубликовано Andres - пт, 07/05/2019 - 10:04

    1. Установка Range (диапазон) слайдера

      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <link rel="stylesheet" href="/resources/demos/style.css">
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

        var set_min = 1; // Минимальное значение
        var set_max = 10; // Максимальное значение
        
        var start_min = 2; // Установленное минимальное значение
        var start_max = 9; // Установленное максимальное значение
          
        $( "#slider-range" ).slider({
          range: true,
          min: start_min,
          max: start_max,
          values: [ set_min, set_max ],

          // Слушаем событие изменения положения бегунков и пишем в поля
          slide: function( event, ui ) {
            $('.js_filters__cena_min').val( ui.values[ 0 ] )
            $('.js_filters__cena_max').val( ui.values[ 1 ] )
          }
        });

                <input autocomplete="off" class="form-text form-control filters__cena_form_control js_filters__cena_min" id="edit-field-price-amount-1-min" maxlength="128" name="field_price_name[min]" size="30" type="text" value="">
                <input autocomplete="off" class="form-text form-control ml10 filters__cena_form_control js_filters__cena_max" id="edit-field-price-amount-1-max" maxlength="128" name="field_price_name[max]" size="30" type="text" value="">
            
                <div id="slider" class="mt25 mb10 ml15 mr15"></div>

    2. Обновление значений в обратную сторону - от полей в слайдер (например можно обновлять после change input)

        $( ".js_filters__cena_min, .js_filters__cena_max" ).change(function() {
            $( "#slider-range" ).slider( "values", 0, set_min);
            $( "#slider-range" ).slider( "values", 1, set_max);
        });

    3. Работа бегунков на Touch экранах (смартфонах, планшетах)

    1. Подключить библиотеку jquery.ui.touch-punch после кода инициализации (1 пункт)

    <script src="https://www.kitsystem.ru/sites/all/libraries/jquery.ui.touch-punch/jquery.ui.touch-punch.min.js"></script>

    2. Вызвать функцию для бегунков

    $('.ui-slider-handle').draggable();

    Обратите внимание: при отладки мобильной версии в браузере Гугл Хром, если вы открыли страницу как на обычном ПК, после открыли "Просмотреть код" и включили режим тач устройств - бегунки работать не будут. Перезагрузите страницу в режиме тач устройств - заработает.

    Где ещё можно смотреть годную инфу

    Теги