MATERIAL : SLIDERS
The Material Design Lite (MDL) slider component is an enhanced version of the new HTML5 <input type="range"> element. A slider consists of a horizontal line upon which sits a small, movable disc (the thumb) and, typically, text that clearly communicates a value that will be set when the user moves it.
Sliders are a fairly new feature in user interfaces, and allow users to choose a value from a predetermined range by moving the thumb through the range (lower values to the left, higher values to the right). Their design and use is an important factor in the overall user experience.
1. Add to html head, BEFORE essentials.css: <link href="assets/plugins/mdl/material.indigo-blue.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 2. Add .enable-materialdesign class to body: <body class="smoothscroll enable-animation enable-materialdesign"> NOTE: if you don't need 'Material Design Lite' javascript plugin, skip step 2 (.enable-materialdesign class is used by assets/js/scripts.js to load MDL plugin from assets/plugins/mdl/) COLOR SCHEME: We use blue as default color scheme. You can create your own material design color: Click to create your material design color Credits: MDL official
Default slider
Starting value
<!-- Default Slider --> <input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="0" tabindex="0"> <!-- Slider with Starting Value --> <input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="25" tabindex="0">
Volume Control
<!-- Volume Control -->
<input class="mdl-slider mdl-js-slider" type="range" min="0" max="10" value="4" step="2">
| MDL class | Effect | Remarks |
|---|---|---|
mdl-slider |
Defines input element as an MDL component | Required |
mdl-js-slider |
Assigns basic MDL behavior to input element | Required |