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

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) {
debug($form['#id']);
if ($form['#id'] == 'id-раскрытой-формы') {
// Находим минимальное и максимальное значение
$query = db_select('node');
$query->addExpression('MIN(nid)', 'min');
$query->addExpression('MAX(nid)', 'max');
$limits = $query->execute()->fetch();

// Оборачиваем виджет враппером с информацией о минимуме и максимуме
$form['nid']['#prefix'] = '

';
$form['nid']['#suffix'] = '

';

// Подключаем 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 = $('

').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;
}

Категория: 
The code has been tested and works
Мультитег: