Label and readout above a filled track with a circular handle positioned by the current value.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Input4 } from "@/components/beste/piece/input4";
<Input4
value={68}
min={0}
max={100}
label="Volume"
unit="%"
/>Slider with a primary-tinted track, current value badge on the right, and min/max labels on the rail.
Two-thumb range slider with a filled band between, a mono low-high readout, and min/max caps.
Row with a bold label, secondary description, and a switch that slides on or off.
Joined from-arrow-to range input with a muted duration chip capping the right side of the control.
Line-item card with a label-price stack and a pill stepper that enforces min zero and a max cap.
Compact number control with minus and plus buttons flanking a centered mono value.