Форма фильтрации

[Yura2017]

Здравствуйте!
Как реализовать такой фильтр, как на airbnb.ru? (см. ссылки на скрины).
https://www.dropbox.com/s/grurr94b8ptbt ... 2.png?dl=0
https://www.dropbox.com/s/nye9p7pnhw2iq ... 8.png?dl=0

Т.е., нужно, чтобы можно было кликнуть на кнопку цена, появилась возможность выбрать диапазон цен, и результат выбора отобразился бы на кнопке вместо названия "цена". И содержимое списка каталога на странице должно автоматически обновиться.
Есть еще и другие фильтры, но мне главное понять - как вообще подойти к решению данной задачи (в какую сторону копать).

Заранее спасибо!

[Alexum]

То что вы хотите без JS не реализовать, так что можно взять за основу jQuery https://jqueryui.com/slider/#range. Под Yii2 есть виджет от Картика http://demos.krajee.com/slider#usage, но обновление кнопки и данных в таблице результатов придётся самому реализовывать или повесить на плечи PJAX если всё в него обёрнуто.

[Yura2017]

Спасибо за ответ. Я, возможно, не совсем понятно описал суть проблемы. Проблема не в том, как реализовать выбор диапазона, а как реализовать возможность выбора каких то данных из открывающегося блока (не знаю как его правильнее назвать) в принципе. Не важно, будет это диапазон чисел, или будет там текстовое поле, в которое пользователь может сам ввести одно число. Не важно, будет это решение на js или без него, главное, чтобы работало. Я просто даже не знаю, с какой стороны к решению этой задачи подойти. Хорошо, если уже есть подобные модули, которые позволят такое реализовать с минимальными усилиями. Но я такие пока не нашел

[Alexum]

Основная концепция различных виджетов на JS заключается в том, что выбранные в них данные помещаются в скрытые инпуты/селекты. Поисковая форма сабмитится и эти данные учитываются в поисковом запросе. В документации есть пример, как можно отдельную форму фильтрации навесить на GridView https://www.yiiframework.com/doc/guide/ ... -filtracii.

[Yura2017]

demos.krajee.com/popover-x - то что мне нужно. Внутри поповера текстовые поля формы отображаются без проблем. А вот при реализации возможности выбора диапазона цен возникает проблема. Использую demos.krajee.com/slider.
Есть форма, в которой пользователю предлагается выбрать критерии фильтров. В этой форме есть несколько полей + кнопки, при клике на которые должны открываться эти самые поповеры (не знаю как их правильнее назвать по-русски). Так вот, если ставлю виджет slider в этот поповер, то он не работает, вместе ползунка отображает обычное текстовое поле. Но, если я выношу код за пределы формы, то все работает. Вот этот самый код:

$form = ActiveForm::begin();
....здесь другие поля формы фильтрации
PopoverX::begin([
'placement' => PopoverX::ALIGN_TOP,
'toggleButton' => ['label'=>'Price', 'class'=>'btn btn-default'],
'header' => '<i class="glyphicon glyphicon-lock"></i> Enter credentials',
'footer' => Html::button('Submit', [
'class' => 'btn btn-sm btn-primary',
'onclick' => '$("#kv-login-form").trigger("submit")'
]) . Html::button('Reset', [
'class' => 'btn btn-sm btn-default',
'onclick' => '$("#kv-login-form").trigger("reset")'
])
]);
// $form2 = ActiveForm::begin([ 'options' => ['id'=>'kv-login-form']]);
echo '<b class="badge">$10</b> ' . Slider::widget([
'name'=>'rating_3',
'value'=>'250,650',
'sliderColor'=>Slider::TYPE_GREY,
'pluginOptions'=>[
'min'=>10,
'max'=>1000,
'step'=>5,
'range'=>true
],
]) . ' <b class="badge">$1,000</b>';
// ActiveForm::end();
PopoverX::end();
...здесь еще другие поля формы для фильтрации
ActiveForm::end();

Подскажите, пожалуйста, как решить проблему