English 中文(简体)
Material Design Lite Tutorial

Material Design Lite Resources

Selected Reading

MDL - Sliders
  • 时间：2024-12-22

Material Design Lite - Spders

Previous Page Next Page  

MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements and display the different types of menu. The following table psts down the available classes and their effects.

Sr.No. Class Name & Description
1

mdl-spder

Identifies input element as an MDL component and is required.
2

mdl-js-spder

Sets basic MDL behavior to input element and is required.

Example

The following example will help you understand the use of the mdl-spder classes to show the different types of spders.

mdl_spders.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <pnk rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <pnk rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML  =  value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Default Spder</td><td>Spder with initial value</td>
            <td>Disabled Spder</td></tr>
         <tr><td><input id = "spder1" class = "mdl-spder mdl-js-spder" type = "range" 
            min = "0" max = "100" value = "0" tabindex = "0" 
            oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
         <td><input id = "spder2" class = "mdl-spder mdl-js-spder" type = "range"  
            min = "0" max = "100" value = "25" tabindex = "0" 
            oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
         <td><input id = "spder3" class = "mdl-spder mdl-js-spder" type = "range"  
            min = "0" max = "100" value = "25" tabindex = "0" step = "2" disabled 
            oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
         </tr>
      </table>
      Value: <span id = "message" >25</span>
   </body>
</html>

Result

Verify the result.