Рассмотрим использование ползунков в MDL.
Ползунок представляет собой HTML5-элемент <input type="range">. Можно сделать его недоступным, в том числе и программно через стандартный атрибут элемента disabled.
Классы, которые могут пригодиться при работе с ползунком.
Ползунок можно использовать внутри параграфа p, которому можно настроить ширину в CSS.
<p style="width:300px">
...
</p>
Внутри параграфа разместите элемент input с атрибутом range. Присвойте ему идентификатор id для js-сценариев. Задайте минимальное и максимальное значения через атрибуты min и max. При необходимости присвойте начальное значение ползунка через атрибут value (по умолчанию ставится 50% от максимального значения). Атрибут step отвечает за шаг увеличения значений (по умолчанию используется 1). Присвойте ему обработчик события для реагирования на изменение показаний.
<p style="width:300px">
<input type="range" id="s1" min="0" max="10" value="4" step="2">
</p>
Осталось добавить MDL-классы и ползунок готов к применению.
<p style="width:300px">
<input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2">
</p>
Посмотреть примеры с ползунками