TimeTravelSlider.js

import React from "react"
import styled from "styled-components"
import { useRecoilState } from "recoil"
import { currentDateState, DATE_RANGE } from "../../state/app"
import { differenceInCalendarDays, addDays } from "date-fns"

const StyledTimeTravelSlider = styled("div")`
    display: flex;
    flex-flow: column;
    align-items: center;
    position: absolute;
    bottom: 5rem;
    left: 0;
    width: 100%;
    z-index: 50;

    input {
        width: 96%;
        margin: 0 2%;
    }
`

const TimeTravelSlider = () => {
    const [currentDate, setCurrentDate] = useRecoilState(currentDateState)
    const maxSliderPos = differenceInCalendarDays(DATE_RANGE[1], DATE_RANGE[0])
    const currentSliderPos = differenceInCalendarDays(currentDate, DATE_RANGE[0])

    const handleDateChange = (e) => {
        const sliderPos = e.target.value

        const nextDate = addDays(DATE_RANGE[0], sliderPos)
        setCurrentDate(nextDate)
    }

    return (
        <StyledTimeTravelSlider>
            <input type="range" value={currentSliderPos} min={0} max={maxSliderPos} onChange={handleDateChange} />
        </StyledTimeTravelSlider>
    )
}

export default TimeTravelSlider