// Сохраните этот файл как price-range-slider.js в папке /js/ вашей темы document.addEventListener('DOMContentLoaded', function() { // Функция для создания слайдера цены function initPriceRangeSlider() { // Получаем элементы DOM const slider = document.getElementById('price-range-slider'); if (!slider) return; // Получаем параметры переданные из PHP const minPrice = parseInt(price_slider_params.min_price); const maxPrice = parseInt(price_slider_params.max_price); let currentMinPrice = parseInt(price_slider_params.current_min_price); let currentMaxPrice = parseInt(price_slider_params.current_max_price); const currencySymbol = price_slider_params.currency_symbol; // Элементы отображения и скрытые поля const minPriceInput = document.getElementById('min_price'); const maxPriceInput = document.getElementById('max_price'); const priceRangeMin = document.getElementById('price-range-min'); const priceRangeMax = document.getElementById('price-range-max'); const rangeSliderContainer = document.querySelector('.price-range-slider-container'); // Устанавливаем начальные значения для скрытых полей minPriceInput.value = currentMinPrice; maxPriceInput.value = currentMaxPrice; // Отображаем начальные значения priceRangeMin.textContent = currencySymbol + currentMinPrice; priceRangeMax.textContent = currencySymbol + currentMaxPrice; // Создаем элементы слайдера const sliderTrack = document.createElement('div'); sliderTrack.classList.add('slider-track'); const sliderRange = document.createElement('div'); sliderRange.classList.add('slider-range'); const handleMin = document.createElement('div'); handleMin.classList.add('slider-handle', 'handle-min'); const handleMax = document.createElement('div'); handleMax.classList.add('slider-handle', 'handle-max'); // Добавляем элементы в DOM slider.appendChild(sliderTrack); slider.appendChild(sliderRange); slider.appendChild(handleMin); slider.appendChild(handleMax); // Устанавливаем размеры слайдера const sliderWidth = slider.offsetWidth; const handleWidth = 18; // Ширина ручки в пикселях // Функция для конвертации цены в положение function priceToPosition(price) { return ((price - minPrice) / (maxPrice - minPrice)) * (sliderWidth - handleWidth); } // Функция для конвертации положения в цену function positionToPrice(position) { return Math.round(minPrice + (position / (sliderWidth - handleWidth)) * (maxPrice - minPrice)); } // Устанавливаем начальные положения let minHandlePosition = priceToPosition(currentMinPrice); let maxHandlePosition = priceToPosition(currentMaxPrice); // Обновляем положения элементов function updateSliderPositions() { handleMin.style.left = minHandlePosition + 'px'; handleMax.style.left = maxHandlePosition + 'px'; sliderRange.style.left = minHandlePosition + 'px'; sliderRange.style.width = (maxHandlePosition - minHandlePosition) + 'px'; } // Обновляем значения цен function updatePriceValues() { currentMinPrice = positionToPrice(minHandlePosition); currentMaxPrice = positionToPrice(maxHandlePosition); minPriceInput.value = currentMinPrice; maxPriceInput.value = currentMaxPrice; priceRangeMin.textContent = currencySymbol + currentMinPrice; priceRangeMax.textContent = currencySymbol + currentMaxPrice; } // Инициализация положений updateSliderPositions(); // Функция для обработки перетаскивания ручек function startDrag(e, isMin) { e.preventDefault(); let startX = e.clientX || e.touches[0].clientX; let startPosition = isMin ? minHandlePosition : maxHandlePosition; function doDrag(e) { let currentX = e.clientX || e.touches[0].clientX; let newPosition = startPosition + (currentX - startX); // Ограничиваем положение ручек if (isMin) { newPosition = Math.max(0, Math.min(newPosition, maxHandlePosition - 10)); minHandlePosition = newPosition; } else { newPosition = Math.max(minHandlePosition + 10, Math.min(newPosition, sliderWidth - handleWidth)); maxHandlePosition = newPosition; } updateSliderPositions(); updatePriceValues(); } function stopDrag() { document.removeEventListener('mousemove', doDrag); document.removeEventListener('touchmove', doDrag); document.removeEventListener('mouseup', stopDrag); document.removeEventListener('touchend', stopDrag); } document.addEventListener('mousemove', doDrag); document.addEventListener('touchmove', doDrag); document.addEventListener('mouseup', stopDrag); document.addEventListener('touchend', stopDrag); } // Обработчики событий для ручек handleMin.addEventListener('mousedown', function(e) { startDrag(e, true); }); handleMin.addEventListener('touchstart', function(e) { startDrag(e, true); }); handleMax.addEventListener('mousedown', function(e) { startDrag(e, false); }); handleMax.addEventListener('touchstart', function(e) { startDrag(e, false); }); } // Инициализируем слайдер после загрузки DOM initPriceRangeSlider(); // Обработчик отправки формы const ajaxForm = document.getElementById('ajaxform'); if (ajaxForm) { ajaxForm.addEventListener('submit', function(e) { // Если необходимо предотвратить отправку формы для AJAX-обработки // e.preventDefault(); // Здесь можно добавить код для AJAX-отправки формы }); } });