Thanh trượt phạm vi CSS Tailwind chỉ có CSS với các biến thể màu chính, phụ, nhấn và ngữ nghĩa. Kích thước xs-xl. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Các thành phần phạm vi cho phép người dùng chọn một giá trị số trong phạm vi xác định bằng cách sử dụng thanh trượt tương tác. Được xây dựng bằng đầu vào phạm vi HTML gốc và kiểu dáng mượt mà, thanh trượt phạm vi cung cấp khả năng kiểm soát trực quan đối với các giá trị liên tục. Hệ thống phạm vi Frutjam hỗ trợ nhiều kích cỡ, màu sắc và trạng thái—lý tưởng cho việc điều khiển âm lượng, bộ lọc giá và lọc dòng thời gian.
Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
| Lớp học | Kiểu | Sự miêu tả |
|---|---|---|
| range | Căn cứ | Styled range slider input |
| range-xs | Kích cỡ | Cực nhỏ |
| range-sm | Kích cỡ | Bé nhỏ |
| range-md | Kích cỡ | Trung bình (mặc định) |
| range-lg | Kích cỡ | Lớn |
| range-xl | Kích cỡ | Cực lớn |
| range-primary | Màu sắc | Màu chủ đề chính |
| range-secondary | Màu sắc | Màu chủ đề phụ |
| range-accent | Màu sắc | Màu chủ đề nhấn mạnh |
| range-neutral | Màu sắc | Màu chủ đề trung tính |
| range-info | Màu sắc | Màu sắc ngữ nghĩa thông tin |
| range-success | Màu sắc | Màu ngữ nghĩa thành công |
| range-warning | Màu sắc | Màu ngữ nghĩa cảnh báo |
| range-error | Màu sắc | Lỗi ngữ nghĩa màu sắc |
Cách sử dụng cơ bản
<input type="range" min="0" max="100" value="40" class="range"> |
<input type="range" min="0" max="100" value="40" className="range"> |
Range Sizes
1 2 3 4 5 | <input type="range" min="0" max="100" value="40" class="range range-xs"> <input type="range" min="0" max="100" value="40" class="range range-sm"> <input type="range" min="0" max="100" value="40" class="range range-md"> <input type="range" min="0" max="100" value="40" class="range range-lg"> <input type="range" min="0" max="100" value="40" class="range range-xl"> |
Range Colors
1 2 3 4 5 6 7 8 | <input type="range" min="0" max="100" value="40" class="range"> <input type="range" min="0" max="100" value="40" class="range range-primary"> <input type="range" min="0" max="100" value="40" class="range range-secondary"> <input type="range" min="0" max="100" value="40" class="range range-accent"> <input type="range" min="0" max="100" value="40" class="range range-info"> <input type="range" min="0" max="100" value="40" class="range range-success"> <input type="range" min="0" max="100" value="40" class="range range-warning"> <input type="range" min="0" max="100" value="40" class="range range-error"> |
Range with Steps
1 2 3 | <input type="range" min="0" max="100" step="10" value="40" class="range"> <input type="range" min="0" max="100" step="5" value="40" class="range range-primary"> <input type="range" min="0" max="100" step="1" value="40" class="range range-secondary"> |
Range with Label
1 2 3 4 5 6 7 8 9 | <label> <span class="block text-sm font-medium mb-2">Volume</span> <input type="range" min="0" max="100" value="70" class="range range-primary"> </label> <label> <span class="block text-sm font-medium mb-2">Price Range: $20 - $80</span> <input type="range" min="0" max="100" value="50" class="range"> </label> |
Disabled Range
<input type="range" min="0" max="100" value="40" class="range" disabled> |
Range with Marks
1 2 3 4 5 6 7 8 9 10 | <div> <div class="flex justify-between text-xs mb-2"> <span>0</span> <span>25</span> <span>50</span> <span>75</span> <span>100</span> </div> <input type="range" min="0" max="100" value="50" class="range range-primary w-full"> </div> |
Using Claude Code, Cursor, or another AI editor?
Cherry MCP cung cấp cho trình soạn thảo AI của bạn tên và cấu trúc lớp Phạm vi chính xác theo yêu cầu. Không còn những lớp học ảo giác nữa.