Default Component - Copy this React, Mui Component to your project

const YearSlider = ({ sliderValue, handleYearChange, yearLabels }) => { const [visibleYears, setVisibleYears] = useState([]); const selectedYear = yearLabels[sliderValue]?.year || "N/A"; const updateVisibleYears = useCallback(() => { const totalVisible = 5; // Number of visible years (adjust as needed) const halfVisible = Math.floor(totalVisible / 2); // Calculate the start and end indices for the visible years let startIndex = sliderValue - halfVisible; let endIndex = sliderValue + halfVisible + 1; // Adjust if the start or end index is out of bounds if (startIndex < 0) { startIndex = 0; endIndex = totalVisible; } else if (endIndex > yearLabels.length) { endIndex = yearLabels.length; startIndex = yearLabels.length - totalVisible; } setVisibleYears(yearLabels.slice(startIndex, endIndex)); }, [sliderValue, yearLabels]); useEffect(() => { updateVisibleYears(); }, [updateVisibleYears]); return ( <StyledSliderContainer> <Box sx={{ display: "flex", justifyContent: "center", alignItems: "center", gap: 2, }} > {visibleYears.map((label, index) => { const actualIndex = index + Math.max(0, sliderValue - 2); return ( <YearDisplay key={label.year} isSelected={actualIndex === sliderValue} isForecast={label.is_forecasted} onClick={() => handleYearChange(null, actualIndex)} aria-label={`Select year ${label.year}`} > {label.year} </YearDisplay> ); })} </Box> <StyledSlider value={sliderValue} onChange={(e, value) => handleYearChange(e, value)} aria-label="Year" step={1} marks={visibleYears.map((label, index) => ({ value: index + Math.max(0, sliderValue - 2), label: "", // No labels on the slider marks }))} min={0} max={yearLabels.length - 1} valueLabelDisplay="auto" valueLabelFormat={(index) => Array.isArray(yearLabels) && yearLabels[index] ? yearLabels[index].year : "N/A" } /> <Typography variant="body2" sx={{ color: "#A0A0A0", textAlign: "center", mt: 1, }} > Drag to explore more years </Typography> </StyledSliderContainer> ); };