Suwak
Suwak mdui jest zaimplementowany za pomocą pola wyboru <input type="range" /> z HTML5.
Sposób użycia
Komponent suwaka jest automatycznie inicjowany po zakończeniu ładowania strony. W przypadku dynamicznie generowanych suwaków należy wywołać mdui.mutation() w celu inicjalizacji.
Kolory
Używa koloru akcentu.
Powiązane artykuły
<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>Stan wyłączony
Można wyłączyć suwak, dodając atrybut disabled do elementu input ciągłego lub dyskretnego suwaka.
Suwak ciągły:
<!-- Domyślna wartość to 0 -->
<label class="mdui-slider">
<input type="range" step="0.1" min="0" max="100" value="0" disabled/>
</label>
<!-- Domyślna wartość jest inna niż 0 -->
<label class="mdui-slider">
<input type="range" step="0.1" min="0" max="100" value="50" disabled/>
</label>Suwak dyskretny:
<!-- Domyślna wartość to 0 -->
<label class="mdui-slider mdui-slider-discrete">
<input type="range" step="1" min="0" max="100" value="0" disabled/>
</label>
<!-- Domyślna wartość jest inna niż 0 -->
<label class="mdui-slider mdui-slider-discrete">
<input type="range" step="1" min="0" max="100" value="50" disabled/>
</label>Dynamicznie generowany suwak
Jeśli twój komponent suwaka jest generowany dynamicznie, musisz wywołać mdui.mutation() w celu inicjalizacji.
Gdy dynamicznie zmienisz wartość suwaka, musisz wywołać metodę mdui.updateSliders(), aby ponownie zainicjować komponent suwaka. Metoda ta przyjmuje jako parametr selektor CSS zawierający klasę .mdui-slider, element DOM lub tablicę elementów DOM, aby określić suwak do ponownej inicjalizacji. Jeśli nie zostanie przekazany żaden parametr, wszystkie suwaki na stronie zostaną ponownie zainicjowane.