Dual Range Slider

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

120320
0500

New here? Read the installation guide.

Import & use
import { Input24 } from "@/components/beste/piece/input24";

<Input24
  label="Price range"
  min={0}
  max={500}
  low={120}
  high={320}
  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.

$420
$0$1000

Budget Slider

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

4

Number Stepper

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

Apr 01
Apr 30
30 days

Date Range

Joined from-arrow-to range input with a muted duration chip capping the right side of the control.

Thanks for the thorough write-up. Two things came to mind while reading — first, the retry logic feels brittle around rate limits;
Shift + ↵ for new line

Textarea

Multi-line input with a shift-enter hint row and a visible corner grip for resize.

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.

Markdown version