Csúszka
Az mdui csúszkái az HTML5 <input type="range" /> beviteli mezőjével valósulnak meg.
Használat
A csúszka komponensek az oldal betöltése után automatikusan inicializálódnak. Dinamikusan létrehozott csúszkák esetén az inicializáláshoz meg kell hívni az mdui.mutation() metódust.
Színek
A kiemelő színt használja.
Kapcsolódó olvasmányok
Material Design tervezési irányelvek: Komponensek - Csúszkák
<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>Letiltott állapot
A csúszka letiltásához adja hozzá a disabled attribútumot az input elemhez folytonos vagy osztott csúszka esetén.
Folytonos csúszka:
<!-- Alapértelmezett érték: 0 -->
<label class="mdui-slider">
<input type="range" step="0.1" min="0" max="100" value="0" disabled/>
</label>
<!-- Az alapértelmezett érték nem 0 -->
<label class="mdui-slider">
<input type="range" step="0.1" min="0" max="100" value="50" disabled/>
</label>Osztott csúszka:
<!-- Alapértelmezett érték: 0 -->
<label class="mdui-slider mdui-slider-discrete">
<input type="range" step="1" min="0" max="100" value="0" disabled/>
</label>
<!-- Az alapértelmezett érték nem 0 -->
<label class="mdui-slider mdui-slider-discrete">
<input type="range" step="1" min="0" max="100" value="50" disabled/>
</label>Dinamikusan generált csúszkák
Ha a csúszka komponense dinamikusan jön létre, az inicializáláshoz meg kell hívni az mdui.mutation() metódust.
Ha dinamikusan módosította a csúszka értékét, meg kell hívnia az mdui.updateSliders() metódust a csúszka komponens újrainicializálásához. Ez a metódus egy paramétert fogad, amely lehet egy .mdui-slider osztályt tartalmazó CSS-választó, egy DOM-elem vagy DOM-elemek tömbje, meghatározva az újrainicializálandó csúszkákat. Ha nem ad meg paramétert, az oldal összes csúszkája újra lesz inicializálva.