Drupal → Выбор диапазона значений в раскрытом фильтре Views с помощью виджета jQuery UI Slider

Поступил вопрос — Чем можно сделать выбор диапазонов в Exposed Filter, как на Яндекс-маркете.

Отвечаю — сделать можно с помощью jQuery UI Slider Widget (в ядре) и небольшого количества кода.

1. Добавляем один или несколько раскрытых фильтров (в примере это фильтр по Nid) и в качестве оператора выбираем Is between:

Получаем:

2. Реализуем хук hook_form_views_exposed_form_alter() в котором подключаем jQuery UI Slider, скрипт инициализации слайдера, стиль и экстра разметку:

/**
 * Implements hook_form_views_exposed_form_alter()
 */
function mymodule_form_views_exposed_form_alter(&$form, $form_state) {
  if ($form_state['view']->name == 'myview' && $form_state['view']->current_display == 'page') {
    // Находим минимальное и максимальное значение
    $query = db_select('node');
    $query->addExpression('MIN(nid)', 'min');
    $query->addExpression('MAX(nid)', 'max');
    $limits = $query->execute()->fetch();
    
    // Оборачиваем виджет враппером с информацией о минимуме и максимуме
    $form['nid']['#prefix'] = '<div class="slider-widget-wrapper" data-min="' . $limits->min . '" data-max="' . $limits->max . '">';
    $form['nid']['#suffix'] = '</div>';
    
    // Подключаем js и css файлы
    $form['#attached']['library'][] = array('system', 'ui.slider');
    $form['#attached']['js'][] = drupal_get_path('module', 'mymodule') . '/slider-init.js';
    $form['#attached']['css'][] = drupal_get_path('module', 'mymodule') . '/slider-style.css';
  }
}

3. В slider-init.js инициализируем виджет:

(function($) {
  Drupal.behaviors.mymodule = {
    attach: function (context, settings) {
      $('.slider-widget-wrapper', context).once('slider-widget', function () {
        var $sliderWrapper = $(this);
        var $minInput = $sliderWrapper.find('input:first');
        var $maxInput = $sliderWrapper.find('input:last');
        
        // Прописываем минимум и максимум в placeholder
        $minInput.attr('placeholder', $sliderWrapper.data('min'));
        $maxInput.attr('placeholder', $sliderWrapper.data('max'));
        
        // Создаём слайдер
        var $slider = $('<div class="slider-widget" />').appendTo($sliderWrapper).slider({
          range: true,
          min: $sliderWrapper.data('min'),
          max: $sliderWrapper.data('max'),
          step: 1,
          values: [
            $minInput.val() === '' ? $sliderWrapper.data('min') : $minInput.val(),
            $maxInput.val() === '' ? $sliderWrapper.data('max') : $maxInput.val()
          ],
          slide: function (event, ui) {
            $minInput.val(ui.values[0]);
            $maxInput.val(ui.values[1]);
          }
        });

        // Описываем реакцию слайдера на ввод данных в поля min/max
        $minInput.keyup(function () {
          $slider.slider('values', 0, this.value);
        });
        $maxInput.keyup(function () {
          $slider.slider('values', 1, this.value);
        });
      });
    }
  };
})(jQuery);

Получаем:

4. В slider-style.css наводим красоту:

.slider-widget-wrapper {
  width: 200px;
}
.slider-widget-wrapper .form-item:nth-child(1) {
  float: left;
}
.slider-widget-wrapper .form-item:nth-child(2) {
  float: right;
}
.slider-widget-wrapper .form-item:nth-child(2) label {
  display: none;
}
.slider-widget-wrapper .form-item:nth-child(2) .form-text {
  text-align: right;
}
.slider-widget-wrapper .form-text {
  width: 90px;
  margin: 0 0 5px 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.slider-widget-wrapper .slider-widget {
  clear: both;
}

Получаем:

Исходники примера (экспорт вьюхи в файле views-export.txt).

Добавлено 19.01.2013

Поддержка jQuery UI Slider Widget появилась в модуле Better Exposed Filters (динамически указать минимум и максимум можно в хуке hook_better_exposed_filters_settings_alter).