Przejdź do głównej treści

Slider Input

Element wejściowy suwaka. Może być używany jako część deski rozdzielczej ISLE lub autonomiczny. W tym ostatnim przypadku, chcesz obsługiwać zmiany za pomocą atrybutu onChange lub powiązać wartość ze zmienną globalną za pomocą atrybutu bind.

Opcje​

  • defaultValue | number: Wartość początkowa suwaka. Default: 10.
  • disabled | boolean: kontroluje, czy wejście suwaka jest aktywne, czy nie. Jeśli jest ustawiona na wartość true, suwak będzie obecny na ekranie, choć wyszarzony. Default: false.
  • inline | boolean: kontroluje ustawienie suwaka w linii z tekstem lub na zewnątrz. Default: false.
  • legend | (string|node): napis na wejściu. Default: none.
  • max | number: Maksymalna wartość suwaka. Default: 100.
  • maxLabel | string: etykieta wyświetlana po prawej stronie suwaka zamiast wartości maksymalnej. Default: none.
  • min | number: Minimalna wartość suwaka. Default: 0.
  • minLabel | string: etykieta wyświetlana na lewo od suwaka zamiast wartości minimalnej. Default: none.
  • onChange | function: wywołanie zwrotne z nową wartością przy zmianie wartości suwaka. Default: onChange() {}.
  • precision | number: zaokrąglenie wejścia. Wartość zostanie zaokrąglona tak, aby nie zawierała więcej znaczących cyfr niż precyzja. Na przykład, jeśli chcemy używać tylko liczb całkowitych, użyjemy precyzji 10, a jeśli chcemy zaokrąglić do setek, użyjemy precyzji 0,001. Default: 10.
  • step | (number|string): wielkość kroku suwaka. Default: 1.
  • hideTooltip | boolean: kontroluje, czy należy ukryć końcówkę narzędzia. Default: false.
  • style | object: Style CSS inline. Default: {}.
  • numberInputStyle | object: Style CSS w linii dla elementów wejściowych liczb. Default: {}.
  • rangeInputStyle | object: Styl CSS w linii dla komponentu wejściowego zakresu. Default: {}.

Przykłady​

Edytor na żywo
Wynik
ReferenceError: Provider is not defined