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 コード、Cursor、または別の AI エディターを使用していますか?
Cherry MCP は、AI エディタに正確な 範囲 クラス名と構造をオンデマンドで提供します。もう幻覚のような授業はありません。