Slider
Die Slider von mdui werden mit dem HTML5-Eingabefeld <input type="range" /> implementiert.
Verwendung
Slider-Komponenten werden nach dem Laden der Seite automatisch initialisiert. Bei dynamisch generierten Slidern muss mdui.mutation() zur Initialisierung aufgerufen werden.
Farbe
Verwendet die Akzentfarbe.
Verwandte Themen
<label class="mdui-slider">
<input type="range" step="0.1" min="0" max="100"/>
</label><label class="mdui-slider mdui-slider-discrete">
<input type="range" step="1" min="0" max="100"/>
</label>Deaktivierter Zustand
Fügen Sie das Attribut disabled zum input-Element eines kontinuierlichen oder diskreten Sliders hinzu, um den Slider zu deaktivieren.
Kontinuierlicher Slider:
<!-- Standardwert ist 0 -->
<label class="mdui-slider">
<input type="range" step="0.1" min="0" max="100" value="0" disabled/>
</label>
<!-- Standardwert ist nicht 0 -->
<label class="mdui-slider">
<input type="range" step="0.1" min="0" max="100" value="50" disabled/>
</label>Diskreter Slider:
<!-- Standardwert ist 0 -->
<label class="mdui-slider mdui-slider-discrete">
<input type="range" step="1" min="0" max="100" value="0" disabled/>
</label>
<!-- Standardwert ist nicht 0 -->
<label class="mdui-slider mdui-slider-discrete">
<input type="range" step="1" min="0" max="100" value="50" disabled/>
</label>Dynamisch generierte Slider
Wenn Ihre Slider-Komponente dynamisch generiert wird, muss mdui.mutation() zur Initialisierung aufgerufen werden.
Wenn Sie den Wert des Sliders dynamisch ändern, müssen Sie die Methode mdui.updateSliders() aufrufen, um die Slider-Komponente neu zu initialisieren. Diese Methode akzeptiert einen Parameter, der ein CSS-Selektor sein kann, der die Klasse .mdui-slider enthält, ein DOM-Element oder ein Array von DOM-Elementen, um die neu zu initialisierenden Slider anzugeben. Wenn kein Parameter übergeben wird, werden alle Slider auf der Seite neu initialisiert.