Joined from-arrow-to range input with a muted duration chip capping the right side of the control.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Input17 } from "@/components/beste/piece/input17";
<Input17
label="Reporting window"
from="Apr 01"
to="Apr 30"
duration="30 days"
/>Time control with hour and minute tiles separated by a colon, plus a small AM or PM segmented toggle.
Date field with a leading calendar icon, mono ISO value, and a chevron hinting at a popover.
Length field with a timer icon, h and m unit-annotated number tiles, and an HH:MM format hint.
Compact number control with minus and plus buttons flanking a centered mono value.
Label and readout above a filled track with a circular handle positioned by the current value.
Two-thumb range slider with a filled band between, a mono low-high readout, and min/max caps.