feat: add price filter and dynamic slider to catalog

- Implemented JavaScript-based price slider for catalog filtering
- Updated catalog views to handle min/max price inputs and compute slider bounds
- Enhanced templates (`index.html`, `side-bar.html`) with filtering form and updated URLs
- Added CSS for price slider styling and form layout
- Introduced utility functions for URL building and price parsing
- Expanded tests for price filtering, sliders, and sidebar active states
- Updated context processor and header for dynamic navigation with price filters

static/js/catalog-price-slider.js

@@ -0,0 +1,61 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const priceFormatter = new Intl.NumberFormat('ru-RU', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    });
+
+    const formatQueryValue = function (value) {
+        return value.toFixed(2).replace(/\.?0+$/, '');
+    };
+
+    document.querySelectorAll('[data-price-slider]').forEach(function (slider) {
+        const minBound = Number.parseFloat(slider.dataset.minBound || '0');
+        const maxBound = Number.parseFloat(slider.dataset.maxBound || slider.dataset.minBound || '0');
+        const minRange = slider.querySelector('[data-price-range-min]');
+        const maxRange = slider.querySelector('[data-price-range-max]');
+        const minHidden = slider.querySelector('[data-price-hidden-min]');
+        const maxHidden = slider.querySelector('[data-price-hidden-max]');
+        const minLabel = slider.querySelector('[data-price-label-min]');
+        const maxLabel = slider.querySelector('[data-price-label-max]');
+        const trackFill = slider.querySelector('[data-price-track-fill]');
+
+        if (!minRange || !maxRange || !minHidden || !maxHidden || !minLabel || !maxLabel || !trackFill) {
+            return;
+        }
+
+        const updateSlider = function () {
+            const minValue = Number.parseFloat(minRange.value);
+            const maxValue = Number.parseFloat(maxRange.value);
+            const rangeSpan = maxBound - minBound;
+            const left = rangeSpan > 0 ? ((minValue - minBound) / rangeSpan) * 100 : 0;
+            const right = rangeSpan > 0 ? ((maxValue - minBound) / rangeSpan) * 100 : 100;
+
+            trackFill.style.left = left + '%';
+            trackFill.style.width = Math.max(right - left, 0) + '%';
+
+            minLabel.textContent = priceFormatter.format(minValue) + ' руб.';
+            maxLabel.textContent = priceFormatter.format(maxValue) + ' руб.';
+
+            minHidden.value = minValue <= minBound ? '' : formatQueryValue(minValue);
+            maxHidden.value = maxValue >= maxBound ? '' : formatQueryValue(maxValue);
+        };
+
+        minRange.addEventListener('input', function () {
+            if (Number.parseFloat(minRange.value) > Number.parseFloat(maxRange.value)) {
+                minRange.value = maxRange.value;
+            }
+
+            updateSlider();
+        });
+
+        maxRange.addEventListener('input', function () {
+            if (Number.parseFloat(maxRange.value) < Number.parseFloat(minRange.value)) {
+                maxRange.value = minRange.value;
+            }
+
+            updateSlider();
+        });
+
+        updateSlider();
+    });
+});