Zum Hauptinhalt springen

Slider Input

Eine Schieberegler-Eingabekomponente. Kann als Teil eines ISLE Dashboards oder eigenständig verwendet werden. Im letzteren Fall wollen Sie Änderungen über das Attribut onChange behandeln oder den Wert über das Attribut bind an eine globale Variable binden.

Optionen​

  • defaultValue | number: Der Startwert des Schiebereglers. Default: 10.
  • disabled | boolean: steuert, ob der Schieberegler-Eingang aktiv ist oder nicht. Wenn auf true gesetzt, ist der Schieberegler auf dem Bildschirm vorhanden, wenn auch ausgegraut. Default: false.
  • inline | boolean: steuert, ob der Schieberegler inline mit Text oder außerhalb platziert werden soll. Default: false.
  • legend | (string|node): Beschriftung des Eingangs. Default: none.
  • max | number: Der maximale Wert des Schiebereglers. Default: 100.
  • maxLabel | string: Beschriftung, die rechts vom Schieberegler anstelle des Maximalwerts angezeigt wird. Default: none.
  • min | number: Der minimale Wert des Schiebereglers. Default: 0.
  • minLabel | string: Beschriftung, die links vom Schieberegler anstelle des Mindestwerts angezeigt wird. Default: none.
  • onChange | function: Callback, der mit dem neuen Wert aufgerufen wird, wenn sich der Schiebereglerwert ändert. Default: onChange() {}.
  • precision | number: Rundung der Eingabe. Der Wert wird so gerundet, dass er nicht mehr signifikante Stellen hat als die Genauigkeit. Wenn man z. B. nur ganze Zahlen verwenden möchte, würde man eine Genauigkeit von 10 verwenden, während man, wenn man auf die Hunderterstelle runden möchte, eine Genauigkeit von 0,001 verwenden würde. Default: 10.
  • step | (number|string): Schrittweite des Schiebereglers. Default: 1.
  • hideTooltip | boolean: steuert, ob der Tooltip ausgeblendet werden soll. Default: false.
  • style | object: CSS-Inline-Stile. Default: {}.
  • numberInputStyle | object: CSS-Inline-Stile für Zahleneingabekomponente. Default: {}.
  • rangeInputStyle | object: CSS-Inlinestil für Bereichseingabekomponente. Default: {}.

Beispiele​

Live-Editor
Ergebnis
ReferenceError: Provider is not defined