Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Bereichskomponente

Zuletzt aktualisiert:

Nur CSS-Tailwind-CSS-Bereichsschieberegler mit primären, sekundären, Akzent- und semantischen Farbvarianten. Größen xs-xl. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Mit Bereichskomponenten können Benutzer mithilfe eines interaktiven Schiebereglers einen numerischen Wert innerhalb eines definierten Bereichs auswählen. Bereichsschieberegler basieren auf nativen HTML-Bereichseingaben und einem reibungslosen Design und bieten eine intuitive Kontrolle über kontinuierliche Werte. Das Frutjam-Sortimentssystem unterstützt mehrere Größen, Farben und Zustände – ideal für Lautstärkeregelung, Preisfilter und Timeline-Scrubbing.

Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Klasse Typ Beschreibung
rangeBaseEingabe des gestalteten Bereichsschiebereglers
range-xsGrößeExtra klein
range-smGrößeKlein
range-mdGrößeMittel (Standard)
range-lgGrößeGroß
range-xlGrößeExtra groß
range-primaryFarbePrimäre Designfarbe
range-secondaryFarbeSekundäre Themenfarbe
range-accentFarbeAkzentfarbe des Themas
range-neutralFarbeNeutrale Themenfarbe
range-infoFarbeSemantische Infofarbe
range-successFarbeSemantische Erfolgsfarbe
range-warningFarbeSemantische Warnungsfarbe
range-errorFarbeSemantische Fehlerfarbe

Grundlegende Verwendung

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

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

Bereichsgrößen

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

Bereichsfarben

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

Bereich mit Stufen

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

Bereich mit Beschriftung

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>

Deaktivierter Bereich

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

Bereich mit Markierungen

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>

Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?

Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Reichweite-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.

Probieren Sie Cherry MCP