Interactive Price Range Slider with Bootstrap 5

 <div class="main-container py-4">
        <div class="row g-4">
            
            <!-- Sidebar Filters -->
            <div class="col-lg-3">
                <!-- Mobile Filter Button -->
                <div class="d-md-none mb-3">
                    <button id="openFilterModal" class="btn btn-primary w-100 d-flex align-items-center justify-content-center gap-2">
                        <i class="bi bi-funnel"></i>
                        <span>Filters</span>
                    </button>
                </div>

                <!-- Sidebar (Desktop) -->
                <div class="sidebar d-none d-md-block">
                    <form id="filterForm">
                        <!-- Price -->
                        <div class="mb-4">
                            <label class="filter-title">Maximum Price</label>
                            <div class="d-flex align-items-center gap-2">
                                <span class="text-muted">$</span>
                                <span class="fs-4 fw-bold" id="priceValue">180</span>
                            </div>
                            <input type="range" class="form-range" min="10" max="800" value="180" id="priceRange" name="max_price">
                            <div class="d-flex justify-content-between text-muted small mt-1">
                                <span>$10</span>
                                <span>$800</span>
                            </div>
                        </div>

                        <!-- Product Type -->
                        <div class="mb-4">
                            <label class="filter-title">Product Type</label>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="typeSaaS" name="product_type[]" value="saas" checked>
                                <label class="form-check-label" for="typeSaaS">SaaS Platforms</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="typeAPI" name="product_type[]" value="api" checked>
                                <label class="form-check-label" for="typeAPI">API Integrations</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="typeDevTools" name="product_type[]" value="devtools" checked>
                                <label class="form-check-label" for="typeDevTools">Developer Tools</label>
                            </div>
                        </div>

                        <!-- Availability -->
                        <div class="mb-4">
                            <label class="filter-title">Availability</label>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="availability" value="all" id="all" checked>
                                <label class="form-check-label" for="all">All products</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="availability" value="active" id="active">
                                <label class="form-check-label" for="active">Active Subscription</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="availability" value="trial" id="trial">
                                <label class="form-check-label" for="trial">Free Trial</label>
                            </div>
                        </div>

                        <button type="button" id="clearFilters" class="btn btn-link text-muted w-100 text-start d-none d-md-block">
                            <i class="bi bi-x-circle"></i> Clear Filters
                        </button>
                    </form>
                </div>

                <!-- Mobile Modal -->
                <div class="modal fade" id="filterModal" tabindex="-1" aria-labelledby="filterModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="filterModalLabel">Filters</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body" id="modalBody"></div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                <button type="button" id="applyFilters" class="btn btn-primary">Apply Filters</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Products Grid -->
            <div class="col-lg-9">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <span class="text-muted small fw-medium" id="resultsCount">6 items</span>

                    <div class="btn-group" role="group" aria-label="Product sorting">
                        <input type="radio" class="btn-check" name="sortOptions" id="sortRelevant" checked>
                        <label class="btn btn-outline-secondary custom-sort-btn" for="sortRelevant">
                            <i class="bi bi-sort-alpha-up fs-4"></i>
                        </label>

                        <input type="radio" class="btn-check" name="sortOptions" id="sortPriceLow">
                        <label class="btn btn-outline-secondary custom-sort-btn" for="sortPriceLow">
                            <i class="bi bi-sort-numeric-down fs-4"></i>
                        </label>

                        <input type="radio" class="btn-check" name="sortOptions" id="sortPriceHigh">
                        <label class="btn btn-outline-secondary custom-sort-btn" for="sortPriceHigh">
                            <i class="bi bi-sort-numeric-up fs-4"></i>
                        </label>
                    </div>
                </div>

                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 g-4" id="productsContainer"></div>
            </div>
        </div>
    </div>

       @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background: #f5f5f5;
        }
        .sidebar {
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 20px;
        }

        .filter-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 16px;
        }

        .product-card {
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            overflow: hidden;
            transition: all 0.3s;
        }

        .product-card:hover {
            box-shadow: 0 8px 20px rgba(0,0,0,0.12);
            transform: translateY(-4px);
        }

        .product-img {
            height: 280px;
            object-fit: cover;
        }

        .price {
            font-size: 24px;
            font-weight: 700;
            color: #2c3e50;
        }

        .main-container {
            max-width: 98%;
            margin: 0 auto;
        }

        .product-info {
            padding: 14px;
        }

        .custom-sort-btn {
            font-size: 0.85rem;
            font-weight: 500;
            padding: 3px 11px;
            border-color: #e0e0e0;
            color: #495057;
            transition: all 0.2s ease;
        }

        .custom-sort-btn:hover {
            background-color: #f8f9fa;
            color: #212529;
            border-color: #ccc;
        }

        .btn-check:checked + .custom-sort-btn {
            background-color: #212529;
            border-color: #212529;
            color: #ffffff;
        }

   const products = [
            { id: 1, name: "NovaFlow", type: "saas", price: 89, availability: "active", img: "https://picsum.photos/id/1015/600/400" },
            { id: 2, name: "PixelForge", type: "devtools", price: 45, availability: "trial", img: "https://picsum.photos/id/201/600/400" },
            { id: 3, name: "ConnectSphere", type: "api", price: 120, availability: "active", img: "https://picsum.photos/id/237/600/400" },
            { id: 4, name: "InsightAI", type: "saas", price: 199, availability: "trial", img: "https://picsum.photos/id/180/600/400" },
            { id: 5, name: "CodeVault", type: "devtools", price: 65, availability: "active", img: "https://picsum.photos/id/251/600/400" },
            { id: 6, name: "SyncAPI Pro", type: "api", price: 150, availability: "trial", img: "https://picsum.photos/id/870/600/400" }
        ];

        function getSortOption() {
            if (document.getElementById('sortPriceLow').checked) return 'price-low';
            if (document.getElementById('sortPriceHigh').checked) return 'price-high';
            return 'relevant';
        }

        function filterAndSortProducts() {
            const maxPrice = parseInt(document.getElementById('priceRange').value) || 800;
            const selectedTypes = Array.from(document.querySelectorAll('input[name="product_type[]"]:checked')).map(i => i.value);
            const availability = document.querySelector('input[name="availability"]:checked')?.value || 'all';

            let filtered = products.filter(p => {
                const priceOk = p.price <= maxPrice;
                const typeOk = selectedTypes.length === 0 || selectedTypes.includes(p.type);
                let availOk = true;
                if (availability === 'active') availOk = p.availability === 'active';
                if (availability === 'trial') availOk = p.availability === 'trial';
                return priceOk && typeOk && availOk;
            });

            const sortOption = getSortOption();
            if (sortOption === 'price-low') {
                filtered.sort((a, b) => a.price - b.price);
            } else if (sortOption === 'price-high') {
                filtered.sort((a, b) => b.price - a.price);
            }

            renderProducts(filtered);
        }

        function renderProducts(filtered) {
            const container = document.getElementById('productsContainer');
            container.innerHTML = '';

            filtered.forEach(product => {
                const card = `
                    <div class="col">
                        <div class="product-card h-100">
                            <img src="${product.img}" class="product-img w-100" alt="${product.name}">
                            <div class="product-info">
                                <h6 class="fw-semibold mb-2">${product.name}</h6>
                                <div class="d-flex justify-content-between align-items-end">
                                    <div>
                                        <span class="price">$${product.price}</span>
                                        <small class="text-muted">/month</small>
                                    </div>
                                    <i class="bi bi-bag fs-3"></i>
                                </div>
                            </div>
                        </div>
                    </div>`;
                container.innerHTML += card;
            });

            document.getElementById('resultsCount').textContent = `${filtered.length} items`;
        }

        // ====================== Initialization ======================
        document.addEventListener('DOMContentLoaded', () => {
            const priceRange = document.getElementById('priceRange');
            const priceValue = document.getElementById('priceValue');
            const filterForm = document.getElementById('filterForm');
            const modalBody = document.getElementById('modalBody');
            const filterModal = new bootstrap.Modal(document.getElementById('filterModal'));

            // Update price value and filter (Desktop)
            function updatePriceValue() {
                priceValue.textContent = priceRange.value;
                filterAndSortProducts();
            }

            priceRange.addEventListener('input', updatePriceValue);

            // Live filters
            filterForm.addEventListener('change', filterAndSortProducts);

            // Sorting
            document.querySelectorAll('input[name="sortOptions"]').forEach(radio => {
                radio.addEventListener('change', filterAndSortProducts);
            });

            // Clear filters
            document.getElementById('clearFilters').addEventListener('click', () => {
                filterForm.reset();
                priceRange.value = 180;
                priceValue.textContent = 180;
                filterAndSortProducts();
            });

            // ====================== Mobile Modal ======================
            document.getElementById('openFilterModal').addEventListener('click', () => {
                modalBody.innerHTML = filterForm.innerHTML;

                // Fix price range in modal
                const modalPriceRange = modalBody.querySelector('#priceRange');
                const modalPriceValue = modalBody.querySelector('#priceValue');

                if (modalPriceRange && modalPriceValue) {
                    modalPriceRange.value = priceRange.value; // sync current value

                    modalPriceRange.addEventListener('input', () => {
                        modalPriceValue.textContent = modalPriceRange.value;
                    });
                }

                filterModal.show();
            });

            // Apply filters from modal
            document.getElementById('applyFilters').addEventListener('click', () => {
                const modalPrice = modalBody.querySelector('#priceRange');
                if (modalPrice) {
                    priceRange.value = modalPrice.value;
                    priceValue.textContent = modalPrice.value;
                }

                // Sync all checkboxes and radios
                modalBody.querySelectorAll('input').forEach(input => {
                    const original = document.getElementById(input.id);
                    if (original) original.checked = input.checked;
                });

                filterAndSortProducts();
                filterModal.hide();
            });

            // Initial render
            renderProducts(products);
        });

Browse docs

Interactive Price Range Slider with Bootstrap 5

1. Overview

2. Architecture

3. Data Structure

4. Main Components

4.1 Sidebar Filters (Desktop)

4.2 Products Grid

4.3 Sorting Controls

5. Core JavaScript Functions

5.1 `filterAndSortProducts()`

5.2 `renderProducts(filtered)`

5.3 Event Handling

6. Mobile Experience

7. Key Features

Real-time Updates

Responsive Design

Clean State Management

Smooth UX

8. Extensibility

User Reviews

0.0

Browse docs

Interactive Price Range Slider with Bootstrap 5

1. Overview

2. Architecture

3. Data Structure

4. Main Components

4.1 Sidebar Filters (Desktop)

4.2 Products Grid

4.3 Sorting Controls

5. Core JavaScript Functions

5.1 filterAndSortProducts()

5.2 renderProducts(filtered)

5.3 Event Handling

6. Mobile Experience

7. Key Features

Real-time Updates

Responsive Design

Clean State Management

Smooth UX

8. Extensibility

User Reviews

0.0

5.1 `filterAndSortProducts()`

5.2 `renderProducts(filtered)`