Range Slider Components Example
Weight Slider
Weight
75 kg
120kg40kg
Current value: 75 kg
Size Slider
Size
42 (L)
XS3XL
Current size: 42 (L)
Price Slider
Price
1500 SAR
500 SAR5000 SAR
Current price: 1500 SAR
Generic Range Slider
50%
Current value: 50%
Developer Notes
- All sliders have both LTR and RTL support.
- The issue with values moving in the opposite direction has been fixed.
- These components can be used in all product pages and filter sections.
- All components work with either
dir="ltr"orisRTL=.
Usage Example
// Import the component
import WeightRangeSelector from '@/components/shop/WeightRangeSelector';
import EnhancedSEO2025 from '@/components/seo/EnhancedSEO2025';
// Use the component
const [weight, setWeight] = useState(75);
<WeightRangeSelector
minWeight={40}
maxWeight={120}
step={1}
value={weight}
onChange={setWeight}
unit="kg"
isRTL={false}
/>