من ${formatNumber(currentMin)} ر.س إلى ${formatNumber(currentMax)} ر.س

${formatNumber(rangeMin)} ${formatNumber(rangeMax)}

`; priceSection.appendChild(slider); const rangeShell = slider.querySelector( ".roja-range-shell-v3" ); const minRange = slider.querySelector( ".roja-range-min-v3" ); const maxRange = slider.querySelector( ".roja-range-max-v3" ); const minOutput = slider.querySelector( "[data-roja-min]" ); const maxOutput = slider.querySelector( "[data-roja-max]" ); const rangeFill = slider.querySelector( ".roja-range-fill-v3" ); /* * إجبار اتجاه السلايدر على RTL. * يتغلب حتى على direction:ltr !important في CSS. */ [rangeShell, minRange, maxRange].forEach( function (element) { element.style.setProperty( "direction", "rtl", "important" ); } ); function updateSlider(changedInput) { let minValue = getNumber(minRange.value); let maxValue = getNumber(maxRange.value); /* * منع المؤشرين من تجاوز بعضهما. */ if ( changedInput === minRange && minValue > maxValue - step ) { minValue = maxValue - step; minRange.value = String(minValue); } if ( changedInput === maxRange && maxValue < minValue + step ) { maxValue = minValue + step; maxRange.value = String(maxValue); } minValue = Math.max(rangeMin, minValue); maxValue = Math.min(rangeMax, maxValue); /* * المؤشر اليمين يغيّر قيمة "من". * المؤشر اليسار يغيّر قيمة "إلى". */ minOutput.textContent = formatNumber(minValue); maxOutput.textContent = formatNumber(maxValue); const total = rangeMax - rangeMin || 1; const minPercent = ((minValue - rangeMin) / total) * 100; const maxPercent = ((maxValue - rangeMin) / total) * 100; /* * لأن السلايدر RTL: * الحد الأدنى يُحسب من اليمين، * والحد الأعلى يُحسب من اليسار. */ rangeFill.style.right = minPercent + "%"; rangeFill.style.left = 100 - maxPercent + "%"; /* * رفع المؤشر الذي يتحرك فوق المؤشر الآخر. */ if (changedInput === minRange) { minRange.style.zIndex = "7"; maxRange.style.zIndex = "6"; } else if (changedInput === maxRange) { minRange.style.zIndex = "6"; maxRange.style.zIndex = "7"; } else { minRange.style.zIndex = "6"; maxRange.style.zIndex = "5"; } } function commitValues() { const minValue = getNumber(minRange.value); const maxValue = getNumber(maxRange.value); setNativeValues( minInput, maxInput, minValue, maxValue ); } minRange.addEventListener("input", function () { updateSlider(minRange); }); maxRange.addEventListener("input", function () { updateSlider(maxRange); }); /* * تطبيق الفلترة بعد انتهاء السحب. */ minRange.addEventListener("change", commitValues); maxRange.addEventListener("change", commitValues); minRange.addEventListener("pointerup", commitValues); maxRange.addEventListener("pointerup", commitValues); updateSlider(); } function initializeAllSidebars() { document .querySelectorAll(SIDEBAR_SELECTOR) .forEach(function (sidebar) { initializeSidebar(sidebar); }); } function scheduleInitialization() { window.clearTimeout(observerTimer); observerTimer = window.setTimeout(function () { initializeAllSidebars(); }, 120); } if (document.readyState === "loading") { document.addEventListener( "DOMContentLoaded", initializeAllSidebars ); } else { initializeAllSidebars(); } /* * إعادة إنشاء السلايدر عند إعادة بناء الفلاتر. */ const observer = new MutationObserver(function () { scheduleInitialization(); }); observer.observe(document.body, { childList: true, subtree: true }); })();

اللوحات الكبيرة: متى تختار لوحة واحدة ضخمة لجدارك؟