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();
Обратите внимание: при отладки мобильной версии в браузере Гугл Хром, если вы открыли страницу как на обычном ПК, после открыли "Просмотреть код" и включили режим тач устройств - бегунки работать не будут. Перезагрузите страницу в режиме тач устройств - заработает.
