Slider

Die Slider-Komponente ermöglicht es Benutzern, durch Ziehen einen Wert aus einer Reihe von Werten auszuwählen.

Verwendung

Importieren Sie die Komponente nach Bedarf:

import 'mdui/components/slider.js';

Importieren Sie den TypeScript-Typ der Komponente nach Bedarf:

import type { Slider } from 'mdui/components/slider.js';

Beispiel:

<mdui-slider></mdui-slider>

Sie können das Anzeigeformat der Textbeschriftung über die JavaScript-Property labelFormatter anpassen. Der Wert dieser Property ist eine Funktion, die den aktuellen Wert des Sliders als Parameter erhält und den anzuzeigenden Text zurückgibt.

<mdui-slider class="example-label-formatter"></mdui-slider>

<script>
  const slider = document.querySelector(".example-label-formatter");
  slider.labelFormatter = (value) => `${value} Stunden`;
</script>

Quellcode

API

Eigenschaften

Attribut	Property	Typ	Standard
`value`	`value`	`number`	`0`
Der Wert des Schiebereglers, der mit Formulardaten übermittelt wird.
	`defaultValue`	`number`	`0`
Der Standardwert. Der Schieberegler setzt beim Zurücksetzen des Formulars auf diesen Wert zurück. Nur JavaScript.
`autofocus`	`autofocus`	`boolean`	`false`
Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
`tabindex`	`tabIndex`	`number`	-
Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.
`min`	`min`	`number`	`0`
Gibt den Mindestwert an. Standard ist `0`.
`max`	`max`	`number`	`100`
Gibt den Höchstwert an. Standard ist `100`.
`step`	`step`	`number`	`1`
Gibt das Schrittintervall an. Standard ist `1`.
`tickmarks`	`tickmarks`	`boolean`	`false`
Fügt dem Schieberegler Skalenstriche hinzu.
`nolabel`	`nolabel`	`boolean`	`false`
Blendet die Wertbeschriftung aus.
`disabled`	`disabled`	`boolean`	`false`
Deaktiviert den Schieberegler.
`form`	`form`	`string`	-
Verknüpft den Schieberegler mit einem `<form>`-Element. Setzen Sie dies auf die `id` eines `<form>`-Elements im selben Dokument. Wenn nicht angegeben, verwendet der Schieberegler sein übergeordnetes `<form>`-Element, falls vorhanden. Dies ermöglicht es dem Schieberegler, mit jedem Formular im Dokument zu arbeiten, nicht nur mit dem, in dem er verschachtelt ist.
`name`	`name`	`string`	`''`
Gibt den Namen des Schiebereglers an, der mit Formulardaten übermittelt wird.
	`validity`	`ValidityState`	-
Ein `ValidityState`-Objekt, das die Gültigkeitszustände des Elements darstellt.
	`validationMessage`	`string`	-
Validierungsnachricht. Leere Zeichenfolge, wenn gültig.
	`labelFormatter`	`(value: number) => string`	-
Gibt eine Funktion an, die den Wert des Tooltips formatiert. Die Funktion erhält den Wert des Schiebereglers als Argument und sollte eine Zeichenfolge zurückgeben, die im Tooltip angezeigt wird.

Methoden

Name	Parameter	Rückgabewert
`click`		`void`
Simuliert einen Mausklick auf das Element.
`focus`	`options: FocusOptions` (Optional)	`void`
Setzt den Fokus auf das Element. Der optionale Objektparameter kann eine `preventScroll`-Eigenschaft enthalten. Wenn `preventScroll` auf `true` gesetzt ist, scrollt die Seite nicht, um das fokussierte Element in den sichtbaren Bereich zu bringen.
`blur`		`void`
Entfernt den Fokus vom Element.
`checkValidity`		`boolean`
Überprüft die Gültigkeit des Formularfelds. Wenn es ungültig ist, wird ein `invalid`-Ereignis ausgelöst und `false` zurückgegeben. Wenn gültig, wird `true` zurückgegeben.
`reportValidity`		`boolean`
Überprüft die Gültigkeit des Formularfelds. Wenn es ungültig ist, wird ein `invalid`-Ereignis ausgelöst, `false` zurückgegeben und eine Validierungsnachricht angezeigt. Wenn gültig, wird `true` zurückgegeben.
`setCustomValidity`	`message: string`	`void`
Setzt eine benutzerdefinierte Fehlermeldung. Wenn die Nachricht nicht leer ist, wird das Feld als ungültig betrachtet.

Ereignisse

Name
`focus`
Wird ausgelöst, wenn der Schieberegler den Fokus erhält.
`blur`
Wird ausgelöst, wenn der Schieberegler den Fokus verliert.
`change`
Wird ausgelöst, wenn sich der Wert ändert und der Schieberegler den Fokus verliert.
`input`
Wird ausgelöst, wenn sich der Wert ändert.
`invalid`
Wird ausgelöst, wenn die Gültigkeit des Formularsteuerelements überprüft wird und es die Einschränkungen nicht erfüllt.

CSS Parts

Name
`track-inactive`
Inaktive Spur.
`track-active`
Aktive Spur.
`handle`
Schieberegler-Griff.
`label`
Wertbeschriftung.
`tickmark`
Skalenstrich.

Vorherige Seite

SegmentedButton

Nächste Seite

Snackbar

Slider

Verwendung

Beispiele

Standardwert

Deaktivierter Zustand

Bereich

Schrittweite

Skalenstriche

Textbeschriftung ausblenden

Textbeschriftung anpassen

API

Eigenschaften

Methoden

Ereignisse

CSS Parts