Range Component

The input[type=range] slider uses input-* utility classes for size, color, and width. Shape and variant modifiers do not affect the native range — only color, size, and width change appearance.

Notes

Default range

Sizes (input-4 ~ input-15)

16px (input-4)

20px (input-5)

24px (input-6)

28px (input-7)

32px (input-8, default)

36px (input-9)

40px (input-10)

44px (input-11)

48px (input-12)

52px (input-13)

56px (input-14)

60px (input-15)

Width modifiers

input-ratio (1:1 square)

input-ratio-2 (2:1)

input-ratio-[3] (3:1)

input-scale (fixed, 400px)

input-scale-2 (2x / 800px)

input-scale-[1.5] (1.5x / 600px)

input-full (100%)

Theme colors

Primary / Secondary / Tertiary

Success / Error / Info

Highlight / Warning / Caution

Ink / Title / Description / Caption / Disabled

Custom colors

Multiple color formats are supported:

Tailwind + raw colors

Size + color combinations

Small (input-6)

Medium (input-9)

Large (input-12)

Width + color combinations

input-ratio + color

input-scale + color

input-full + color