---
name: SliderInput
description: Onesown Blazor Komponente SliderInput (Inputs). Verwende diesen Skill wenn du die SliderInput-Komponente verwenden, konfigurieren oder debuggen moechtest.
---

# SliderInput

**Namespace:** `Onesown.Blazor.Components`  
**Kategorie:** Inputs  
**Basisklasse:** `FormControlBase`  

Schieberegler-Eingabefeld (range input) mit OoDesign-Token-Styling, optionalem Range-Modus (zwei Handles), konfigurierbaren Min/Max/Step-Werten und wahlweiser Anzeige des aktuellen Werts.

**Live-Demo:** https://components.schini.com/demo/sliderinput  

## Parameter

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Min`` | ``double`` | ``0`` | Minimaler Wert des Sliders. Standard: 0. |
| ``Max`` | ``double`` | ``100`` | Maximaler Wert des Sliders. Standard: 100. |
| ``Step`` | ``double`` | ``1`` | Schrittweite zwischen erlaubten Werten. Standard: 1. |
| ``Value`` | ``double`` |  | Aktuell gebundener Wert (Single-Value-Modus). Standard: 0. |
| ``ValueChanged`` | ``EventCallback<double>`` |  | EventCallback für Two-Way-Binding mit @bind-Value. |
| ``ValueExpression`` | ``Expression<Func<object>>`` |  | LINQ-Expression auf die gebundene Model-Property. Wird benötigt für DataAnnotations-Validierung und Floating-Label-Text. |
| ``ShowRange`` | ``bool`` |  | Aktiviert den Range-Modus mit zwei Handles (Von/Bis). Standard: false. |
| ``Von`` | ``double`` |  | Unterer Grenzwert im Range-Modus (@bind-Von). |
| ``VonChanged`` | ``EventCallback<double>`` |  | EventCallback für Two-Way-Binding mit @bind-Von. |
| ``Bis`` | ``double`` |  | Oberer Grenzwert im Range-Modus (@bind-Bis). |
| ``BisChanged`` | ``EventCallback<double>`` |  | EventCallback für Two-Way-Binding mit @bind-Bis. |
| ``ShowCurrentValue`` | ``bool`` |  | Zeigt den aktuellen Wert (bzw. Von/Bis im Range-Modus) neben dem Slider an. Standard: false. |
| ``Unit`` | ``string`` |  | Optionale Einheit die hinter dem angezeigten Wert erscheint (z.B. "%" oder "px"). Standard: leer. |
| ``Disabled`` | ``bool`` |  | Deaktiviert den Slider: keine Eingabe, ausgegraut. Standard: false. |

## Geerbte Parameter (FormControlBase)

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Size`` | ``string`` | ``OoSize.Md`` | Größe der Komponente. Mögliche Werte: OoSize.Xs, OoSize.Sm, OoSize.Md, OoSize.Lg, OoSize.Xl. Wird als CSS-Klasse am Root-Element gesetzt. |
| ``Id`` | ``string`` | ``Generator.GenerateRandomHtmlTagID()`` | Eindeutige HTML-ID des Input-Elements. Wird automatisch generiert und kann überschrieben werden (z. B. für Labels mit for-Attribut). |
| ``ShowLabel`` | ``bool`` | ``true`` | Blendet das Label über dem Eingabefeld ein oder aus. Standard: true. |
| ``IsFloatingLabel`` | ``bool`` | ``true`` | Aktiviert das schwebende Label (Floating Label), das beim Fokus oder bei Eingabe nach oben animiert. Standard: true. |
| ``Label`` | ``string`` |  | Beschriftung des Eingabefelds. Wird auch als Accessible-Name für Screenreader verwendet. |
| ``Placeholder`` | ``string`` | ``" "`` | Platzhaltertext im leeren Eingabefeld. Standard: Leerzeichen (verhindert Floating-Label-Sprung in Chrome). |
| ``AutoSaveCallback`` | ``EventCallback`` |  | Wird nach jeder Wertänderung ausgelöst und signalisiert der Seite, dass gespeichert werden soll. Kombinierbar mit TriggerAutoSaveCallbackOnlyIfValid. |
| ``TriggerAutoSaveCallbackOnlyIfValid`` | ``bool`` | ``true`` | Steuert ob AutoSaveCallback nur bei gültigem Wert ausgelöst wird. Standard: true. |
| ``AfterValueChanged`` | ``EventCallback`` |  | Wird nach jeder Wertänderung ausgelöst, unabhängig von der Gültigkeit des Werts. Geeignet für Live-Vorschau oder Seiteneffekte. |
| ``ShowValidationTooltip`` | ``bool`` | ``false`` | Zeigt Validierungsmeldungen als Tooltip neben dem Feld statt als Text darunter. Standard: false. |

## Hinweise

- Immer @bind-Value für Two-Way-Binding verwenden
- Für Formular-Validierung ValueExpression="() => _model.Property" setzen
- Komponente muss innerhalb eines &lt;Form&gt;- oder &lt;EditForm&gt;-Containers liegen, damit der EditContext greift
- AutoSaveCallback wird nach jeder gültigen Änderung ausgelöst, wenn TriggerAutoSaveCallbackOnlyIfValid=true (Standard)
- AfterValueChanged wird nach jeder Änderung ausgelöst, unabhängig von der Gültigkeit
- ShowValidationTooltip=true zeigt Validierungsmeldungen als Tooltip statt unter dem Feld
- Einfacher Slider: &lt;SliderInput Label="Lautstärke" @bind-Value="_lautstaerke" Min="0" Max="100" /&gt;
- Range-Modus: &lt;SliderInput ShowRange="true" @bind-Von="_von" @bind-Bis="_bis" Min="0" Max="200" /&gt;
- Wertanzeige: ShowCurrentValue="true" zeigt den aktuellen Wert neben dem Slider
- Schrittweite: Step="5" erlaubt nur Vielfache von 5
- Deaktivieren: Disabled="true" sperrt den Slider und graut ihn aus