Budget Slider

$420
$0$1000
About this piece

Budget Slider

Slider with a primary-tinted track, current value badge on the right, and min/max labels on the rail.

Usage

The import and the props worth knowing about, in one place.

import { Input19 } from "@/components/beste/piece/input19";

<Input19
  label="Monthly budget"
  min={0}
  max={1000}
  value={420}
  unit="$"
/>

More Input pieces

View all Input
Volume68%

Range Slider

Label and readout above a filled track with a circular handle positioned by the current value.

120320
0500

Dual Range Slider

Two-thumb range slider with a filled band between, a mono low-high readout, and min/max caps.

Cabin upgrade$38 each
2

Quantity Stepper

Line-item card with a label-price stack and a pill stepper that enforces min zero and a max cap.

Email notificationsGet updates when teammates comment

Toggle Row

Row with a bold label, secondary description, and a switch that slides on or off.

4

Number Stepper

Compact number control with minus and plus buttons flanking a centered mono value.

small, compact, dense

Dense Input

Tight small-size text field for data tables and filter rails, with smaller type and tight padding.