Chuyển đến nội dung chính
Frutjam logo Frutjam
v2.2.2
Theme

Range Component

CSS-only Tailwind CSS range slider with primary, secondary, accent, and semantic color variants. Sizes xs–xl. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Range components allow users to select a numeric value within a defined range using an interactive slider. Built with native HTML range inputs and smooth styling, range sliders provide intuitive control over continuous values. The Frutjam range system supports multiple sizes, colors, and states—ideal for volume controls, price filters, and timeline scrubbing.

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ả
rangeCăn cứStyled range slider input
range-xsKích cỡCực nhỏ
range-smKích cỡBé nhỏ
range-mdKích cỡTrung bình (mặc định)
range-lgKích cỡLớn
range-xlKích cỡCực lớn
range-primaryMàu sắcMàu chủ đề chính
range-secondaryMàu sắcMàu chủ đề phụ
range-accentMàu sắcMàu chủ đề nhấn mạnh
range-neutralMàu sắcMàu chủ đề trung tính
range-infoMàu sắcMàu sắc ngữ nghĩa thông tin
range-successMàu sắcMàu ngữ nghĩa thành công
range-warningMàu sắcMàu ngữ nghĩa cảnh báo
range-errorMàu sắcLỗ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

html 
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

html 
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

html 
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

html 
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

html 
<input type="range" min="0" max="100" value="40" class="range" disabled>

Range with Marks

0 25 50 75 100
html 
 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>