Price-Range Slider Component
PriceRangeSlider is a highly customizable, accessible, and responsive React component for selecting a price range using two draggable slider thumbs. It's ideal for filtering products or listings by price in e-commerce or marketplace applications.
Features Implemented
- Dual-thumb range slider: Allows users to select minimum and maximum price values within a specified range.
- Fully responsive: Works well across screen sizes.
- Interactive dragging: Handles both mouse and touch input for drag-and-drop slider handles.
- Click-to-jump: Clicking on the track jumps the nearest handle.
- Live value display: Shows selected min and max prices in a readable format.
- Styling support: Uses utility-first classes (Tailwind CSS) for easy theming and branding.
Filter by Price
Price
$20 - $75
$1$50$99+