Слайдер
Слайдеры в mdui реализованы с помощью HTML5 элемента <input type="range" />.
Использование
Компонент слайдера инициализируется автоматически после загрузки страницы. Для динамически созданных слайдеров необходимо вызвать mdui.mutation().
Цвет
Используется акцентный цвет.
Связанное чтение
Рекомендации по дизайну Material Design: Компоненты - Слайдер
<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>Отключенное состояние
Добавьте атрибут disabled к элементу input непрерывного или дискретного слайдера, чтобы отключить его.
Непрерывный слайдер:
<!-- Значение по умолчанию — 0 -->
<label class="mdui-slider">
<input type="range" step="0.1" min="0" max="100" value="0" disabled/>
</label>
<!-- Значение по умолчанию — не 0 -->
<label class="mdui-slider">
<input type="range" step="0.1" min="0" max="100" value="50" disabled/>
</label>Дискретный слайдер:
<!-- Значение по умолчанию — 0 -->
<label class="mdui-slider mdui-slider-discrete">
<input type="range" step="1" min="0" max="100" value="0" disabled/>
</label>
<!-- Значение по умолчанию — не 0 -->
<label class="mdui-slider mdui-slider-discrete">
<input type="range" step="1" min="0" max="100" value="50" disabled/>
</label>Динамически созданный слайдер
Если ваш слайдер создается динамически, необходимо вызвать mdui.mutation() для инициализации.
Если вы динамически изменили значение слайдера, вызовите метод mdui.updateSliders() для его обновления. Он принимает CSS-селектор (содержащий .mdui-slider), DOM-элемент или массив элементов. Без аргументов обновляются все слайдеры на странице.