Slider Range
Dual-handle range slider with labels and live min max values.
Budget range
Dependencies
- @radix-ui/react-slider
- clsx
- tailwind-merge
Files
- components/ui/slider-range.tsx
Installation
Using shadcn CLI
npx shadcn add slider-range --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install @radix-ui/react-slider clsx tailwind-mergeRelated Inputs Components
Address Input
Multi-field address form for street, city, region, postal code, and country.
Autocomplete Address
Address input with suggestions and structured output for street, city, state, and postal code.
Avatar Upload
Circular avatar with upload overlay, drag and drop support, and image preview.
Character Counter
Textarea with live character count, limit enforcement, and warning states.
Checkbox
A styled checkbox component with 8 style presets including modern, glassmorphism, neumorphism, brutalist, retro-mac, windows-95, flat, and skeuomorphic.
Checkbox Group
Checkbox list with optional select all toggle and indeterminate support.