Posuvník
Posuvník mdui je implementován pomocí HTML5 <input type="range" /> vstupního prvku.
Způsob volání
Komponenta posuvníku se automaticky inicializuje po načtení stránky. U dynamicky generovaných posuvníků je potřeba zavolat mdui.mutation() pro inicializaci.
Barvy
Používá akcentní barvu.
Související čtení
<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>Stav: zakázáno
Přidáním atributu disabled k prvku input spojitého nebo diskrétního posuvníku posuvník zakážete.
Spojitý posuvník:
<!-- Výchozí hodnota je 0 -->
<label class="mdui-slider">
<input type="range" step="0.1" min="0" max="100" value="0" disabled/>
</label>
<!-- Výchozí hodnota není 0 -->
<label class="mdui-slider">
<input type="range" step="0.1" min="0" max="100" value="50" disabled/>
</label>Diskrétní posuvník:
<!-- Výchozí hodnota je 0 -->
<label class="mdui-slider mdui-slider-discrete">
<input type="range" step="1" min="0" max="100" value="0" disabled/>
</label>
<!-- Výchozí hodnota není 0 -->
<label class="mdui-slider mdui-slider-discrete">
<input type="range" step="1" min="0" max="100" value="50" disabled/>
</label>Dynamicky generovaný posuvník
Pokud je vaše komponenta posuvníku dynamicky generována, musíte pro její inicializaci zavolat mdui.mutation().
Pokud jste dynamicky upravili hodnotu posuvníku, musíte zavolat metodu mdui.updateSliders() pro opětovnou inicializaci komponenty posuvníku. Tato metoda přijímá jeden parametr, kterým může být CSS selektor obsahující třídu .mdui-slider, DOM prvek nebo pole DOM prvků, což určuje posuvníky, které mají být znovu inicializovány. Pokud není předán žádný parametr, budou znovu inicializovány všechny posuvníky na stránce.