RangeSlider

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

Verwendung

Importieren Sie die Komponente nach Bedarf:

import 'mdui/components/range-slider.js';

Importieren Sie den TypeScript-Typ der Komponente nach Bedarf:

import type { RangeSlider } from 'mdui/components/range-slider.js';

Beispiel:

<mdui-range-slider></mdui-range-slider>

Über das Attribut value können Sie den aktuellen Wert des Range Sliders lesen oder setzen. Der Wert dieses Attributs ist ein Array und kann nur über eine JavaScript-Property gelesen und gesetzt werden.

<mdui-range-slider class="example-value"></mdui-range-slider>

<script>
  const slider = document.querySelector(".example-value");
  slider.value = [30, 70];
</script>

Quellcode

Deaktivierter Zustand

Fügen Sie das Attribut disabled hinzu, um den Range Slider zu deaktivieren.

<mdui-range-slider disabled></mdui-range-slider>

Quellcode

Bereich

Verwenden Sie die Attribute min und max, um die Minimal- und Maximalwerte des Range Sliders festzulegen.

<mdui-range-slider min="10" max="20"></mdui-range-slider>

Quellcode

Schrittweite

Verwenden Sie das Attribut step, um die Schrittweite des Range Sliders festzulegen.

<mdui-range-slider step="10"></mdui-range-slider>

Quellcode

Skalenstriche

Fügen Sie das Attribut tickmarks hinzu, um Skalenstriche auf dem Range Slider anzuzeigen.

<mdui-range-slider tickmarks step="10"></mdui-range-slider>

Quellcode

Textbeschriftung ausblenden

Fügen Sie das Attribut nolabel hinzu, um die Textbeschriftung auf dem Range Slider auszublenden.

<mdui-range-slider nolabel></mdui-range-slider>

Quellcode

Textbeschriftung anpassen

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

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

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

Quellcode

API

Eigenschaften

Attribut	Property	Typ	Standard
	`defaultValue`	`number[]`	`[]`
Gibt den Standardwert an. Der Schieberegler setzt beim Zurücksetzen des Formulars auf diesen Zustand zurück. Nur JavaScript.
	`value`	`number[]`	-
Gibt den Wert des Schiebereglers als Array an. Dieser Wert wird mit Formulardaten übermittelt. Hinweis: Dieser Wert kann nicht initial über ein HTML-Attribut gesetzt werden. Verwenden Sie die JavaScript-Eigenschaft, um ihn zu ändern.
`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 Bereichs-Schieberegler den Fokus erhält.
`blur`
Wird ausgelöst, wenn der Bereichs-Schieberegler den Fokus verliert.
`change`
Wird ausgelöst, wenn sich der Wert ändert und der Bereichs-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`
Spur für den inaktiven Zustand.
`track-active`
Spur für den aktiven Zustand.
`handle`
Griff zur Interaktion.
`label`
Wertbeschriftung.
`tickmark`
Skalenstrich.

Vorherige Seite

Radio

Nächste Seite

Select