跳转到主内容
Frutjam logo Frutjam
v2.2.5
Theme

范围成分

最后更新:

仅 CSS Tailwind CSS 范围滑块，具有主要、次要、重音和语义颜色变体。尺寸为 xs-xl。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。

范围组件允许用户使用交互式滑块选择定义范围内的数值。范围滑块采用原生 HTML 范围输入和平滑样式构建，可提供对连续值的直观控制。 Frutjam 系列系统支持多种尺寸、颜色和状态，非常适合音量控制、价格过滤器和时间线清理。

仅 CSS，无需 JavaScript。 WCAG AA 可访问且与框架无关 - 可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。

班级 类型 描述
range根据样式范围滑块输入
range-xs尺寸特小号
range-sm尺寸小的
range-md尺寸中（默认）
range-lg尺寸大的
range-xl尺寸特大号
range-primary颜色主要主题颜色
range-secondary颜色次要主题色
range-accent颜色强调主题颜色
range-neutral颜色中性主题色
range-info颜色信息语义颜色
range-success颜色成功语义色
range-warning颜色警告语义颜色
range-error颜色错误语义颜色

基本用法

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

<input type="range" min="0" max="100" value="40" className="range">

范围尺寸

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">

颜色范围

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">

范围与步骤

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">

带标签的范围

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>

禁用范围

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

带标记的范围

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>

使用 Claude Code、Cursor 或其他 AI 编辑器？

Cherry MCP 为您的 AI 编辑器按需提供准确的 范围 类名称和结构。不再有幻觉课程。

尝试Cherry MCP