<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Filter</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#slider-range {
margin: 20px;
}
.price {
font-size: 16px;
font-weight: bold;
}
.product-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.product-item {
border: 1px solid #ccc;
padding: 15px;
width: calc(33.33% - 30px);
box-sizing: border-box;
}
.product-item h3 {
font-size: 18px;
margin: 0 0 10px;
}
.product-item .price {
font-size: 16px;
color: #e67e22;
}
</style>
</head>
<body>
<h2>Select Price Range</h2>
<p>
Price: <span class="price" id="min-price"></span> - <span class="price" id="max-price"></span>
</p>
<div id="slider-range"></div>
<h2>Products</h2>
<div class="product-grid" id="product-grid">
<!-- Products will be displayed here -->
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
// Sample product data
const products = [{
id: 1,
name: 'Product A',
price: 150,
image: 'https://via.placeholder.com/150'
},
{
id: 2,
name: 'Product B',
price: 250,
image: 'https://via.placeholder.com/150'
},
{
id: 3,
name: 'Product C',
price: 450,
image: 'https://via.placeholder.com/150'
},
{
id: 4,
name: 'Product D',
price: 600,
image: 'https://via.placeholder.com/150'
},
{
id: 5,
name: 'Product E',
price: 850,
image: 'https://via.placeholder.com/150'
},
];
// Function to display products in the grid
function displayProducts(filteredProducts) {
const productGrid = $("#product-grid");
productGrid.empty(); // Clear the grid before adding new products
if (filteredProducts.length === 0) {
productGrid.append("<p>No products available in this price range.</p>");
} else {
filteredProducts.forEach(product => {
productGrid.append(`
<div class="product-item">
<img src="${product.image}" alt="${product.name}">
<h3>${product.name}</h3>
<p class="price">$${product.price}</p>
</div>
`);
});
}
}
// Filter products based on the selected price range
function filterProducts(minPrice, maxPrice) {
const filteredProducts = products.filter(product => product.price >= minPrice && product.price <= maxPrice);
displayProducts(filteredProducts);
}
$(function() {
// Initialize slider
$("#slider-range").slider({
range: true,
min: 0,
max: 1000,
values: [100, 500], // Initial values for min and max
slide: function(event, ui) {
// Update displayed prices as the slider moves
$("#min-price").text("$" + ui.values[0]);
$("#max-price").text("$" + ui.values[1]);
// Filter and display products based on the selected range
filterProducts(ui.values[0], ui.values[1]);
}
});
// Set initial values for price display
$("#min-price").text("$" + $("#slider-range").slider("values", 0));
$("#max-price").text("$" + $("#slider-range").slider("values", 1));
// Display products for the initial price range
filterProducts($("#slider-range").slider("values", 0), $("#slider-range").slider("values", 1));
});
</script>
</body>
</html>
Comments
Post a Comment