added slider as price filter

2025-05-31 17:54:55 +02:00
parent 1b1924b0b7
commit dbe654d829
5 changed files with 139 additions and 70 deletions
--- a/01-frontend/src/helper/homepage/PriceSlider.tsx
+++ b/01-frontend/src/helper/homepage/PriceSlider.tsx
@@ -0,0 +1,48 @@
+import { Slider, Typography, Box } from "@mui/material";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+type PriceSliderProps = {
+    min?: number;
+    max?: number;
+    onChange?: (range: [number, number]) => void;
+};
+
+export default function PriceSlider({ min = 0, max = 100, onChange }: PriceSliderProps) {
+
+    const { t } = useTranslation();
+    const [value, setValue] = useState<[number, number]>([min, max]);
+
+    const handleChange = (_: Event, newValue: number | number[]) => {
+        if (Array.isArray(newValue)) {
+            setValue([newValue[0], newValue[1]]);
+        }
+    };
+
+    const handleCommitted = (_: Event, newValue: number | number[]) => {
+        if (Array.isArray(newValue)) {
+            onChange?.([newValue[0], newValue[1]]);
+        }
+    };
+
+    return (
+        <div>
+            <h3>{t('price')}</h3>
+            <Box sx={{pl: 2, pr: 7}}>
+                <Slider
+                    value={value}
+                    onChange={handleChange}
+                    onChangeCommitted={handleCommitted}
+                    valueLabelDisplay="auto"
+                    min={min}
+                    max={max}
+                    step={1}
+                />
+            </Box>
+            <Box sx={{ pl: 1, pr: 6, display: 'flex', justifyContent: 'space-between' }}>
+                <Typography>{value[0]?.toFixed(2) ?? "0.00"} €</Typography>
+                <Typography>{value[1]?.toFixed(2) ?? "0.00"} €</Typography>
+            </Box>
+        </div>
+    );
+}