When it comes to select a range of date with a date for start and a date for end, it would take 3 to 4 clicks to select a date with datetime picker  [+] in HTML 5.

There is quite a lot of details in the datetime picker element shipped with html5, like "min", "max", "value"....

<label htmlFor="start">Start date:</label>
<input type="date" id="start" 
    name="trip-start"
    value="2020-07-22"
    min="2018-01-01" 
    max="2022-12-31"/>

It feels a bit awkward to select a range of date by 7 to 8 clicks on two date pickers.

How about the range input  [+] for date selector? Well, It is called "range" but more like a pointer to one value. And it takes two clicks to change the range.

I looked quite long to find a date range selector that is responsive and convenient. Then the implementation on ElasicSearch seems cool and inspired me to build this.

You could drag the handlers on both sides to increase or decrease the range. and you can drag the selected area to move along the guage, to change the start and end date at the same time.

When the range is changed, the handlers on both sides show the new date responsively, as well as the range width indicator in the middle.

The way to use it is straightforward: (It is important to place the component in a div with fixed height)

<div className=" bg-light rounded-5 p-2" style={{height:"150px", width:"1200px"}}>
    <DateRangeSlide start={new Date("2021-07-22")}
        end={new Date("2022-08-22")}
        min={new Date("2021-01-01")}
        max={new Date("2022-12-31")}
        {/*
        onDateRangeChange?: (d1: Date, d2: Date) => void
        onDateRangeChanged?: (d1: Date, d2: Date) => void
        */}
        stepDay={1} />
</div>

The source code of DateRangeSlide  [+]

At last, the credit goes to react-rnd  [+] and react-draggable  [+]