49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
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: 1, pr: 1}}>
|
|
<Slider
|
|
value={value}
|
|
onChange={handleChange}
|
|
onChangeCommitted={handleCommitted}
|
|
valueLabelDisplay="auto"
|
|
min={min}
|
|
max={max}
|
|
step={1}
|
|
/>
|
|
</Box>
|
|
<Box sx={{display: 'flex', justifyContent: 'space-between'}}>
|
|
<Typography>{value[0]?.toFixed(2) ?? "0.00"} €</Typography>
|
|
<Typography>{value[1]?.toFixed(2) ?? "0.00"} €</Typography>
|
|
</Box>
|
|
</div>
|
|
);
|
|
}
|