مكونات شريط التمرير المتوافقة مع RTL

تنفيذ سريع

// استيراد المكون
import WeightRangeSelector from '@/components/shop/WeightRangeSelector';
import EnhancedSEO2025 from '@/components/seo/EnhancedSEO2025';

// في مكونك الرئيسي
export default function ProductPage() {
  // حالة الوزن
  const [weight, setWeight] = useState(75);

  // معالج تغيير القيمة
  const handleWeightChange = (newWeight) => {
    setWeight(newWeight);
    // منطق التطبيق الخاص بك هنا
  };

  return (
    <div dir="rtl">
      <WeightRangeSelector
        minWeight={40}
        maxWeight={120}
        step={1}
        value={weight}
        onChange={handleWeightChange}
        unit="كجم"
        isRTL={true}
      />
    </div>
  );
}

المكونات المتاحة

• WeightRangeSelector

  مثالي لتحديد الوزن في المواصفات أو المنتجات ذات الصلة بالوزن.

• SizeRangeSelector

  يدعم تحديد المقاسات مع إمكانية استخدام تسميات المقاسات (S، M، L).

• PriceRangeSelector

  مصمم خصيصًا لنطاقات الأسعار مع دعم للعملات المختلفة.

• RangeSlider

  المكون الأساسي القابل للتخصيص بالكامل لأي استخدام.