React redux slider

user_14124539 0
Viewed 143

I have a page presenting sales offers, I would like to add to my list a filter on the year with a slider whose minimum corresponds to the smallest year of my offers and the maximum with the largest year my offers

My problem is that on my slider I have the value "Nan" which appears on the minimum ... I specify that I am starting with react-redux

const [year, setYear] = useState([filters.year.year__min,filters.year.year__max])

code

const handleChange = (event, newValue) => {
    setYear(newValue);
  };

code

function valuetext(value) {
    return `${year}`;
}

code

<Slider
defaultValue={year}
onChange={handleChange}
valueLabelDisplay="auto"
aria-labelledby="range-slider"
getAriaValueText={valuetext}
min={filters.year.year__min}
max={filters.year.year__max}

thanks for your help :)

react-redux reactjs slider
1 Answers

I have found answer alone, if it can help anyone :

const filters = useSelector(({ offerApp }) => offerApp.filterOffers);

function OfferSidebarContent(props) {

const filters = useSelector(({ offerApp }) => offerApp.filterOffers);
const labelsOffer = useSelector(({ offerApp }) => offerApp.labelsOffer);    

const [year, setYear] = useState([filters.year.year__min,filters.year.year__max])
const [defaultYear, setDefaultYear] = useState([filters.year.year__min,filters.year.year__max])
    state
    useEffect(() => {
      setYear([filters.year.year__min,filters.year.year__max]);
      setDefaultYear([filters.year.year__min,filters.year.year__max]);
    }, [filters]);
const classes = useStyles(props);

const handleChange = (event, newValue) => {
    setYear(newValue);
  };


function valuetext(year) {
    return `${year}`;
}

    
if (typeof filters.year.year__min === 'undefined') return null;

return (
    <FuseAnimate animation="transition.slideUpIn" delay={400}>
        <div className="flex-auto border-l-1 border-solid">
            <div className="p-24">
                <Button

                    component={Link}
                    to="/offers/offer/new"
                    variant="contained"
                    color="primary"
                    className="w-full"
                >
                    add offre
                </Button>
            </div>

            <div className={classes.listWrapper}>

                <ListSubheader className={classes.listSubheader} disableSticky>
                        MILLESIME
                </ListSubheader>
                <div className="p-24"> 
                    <Slider
                        defaultValue={defaultYear}
                        value={year}
                        onChange={handleChange}
                        valueLabelDisplay="auto"
                        aria-labelledby="range-slider"      
                        getAriaValueText={valuetext}
                        min={filters.year.year__min}
                        max={filters.year.year__max} 
                    >

                    </Slider>
                </div>                                                                      
            </div>
        </div>
    </FuseAnimate>
);

}


export default OfferSidebarContent;
user_141244500
Related