Material Design Lite - 滑塊

上一個

下一個

MDL 提供一系列 CSS 類，以應用各種預定義的視覺和行為增強功能，並顯示不同型別的選單。下表列出了可用的類及其效果。

序號	類名稱和說明
1	mdl-slider 將 input 元素標識為 MDL 元件且是必需的。
2	mdl-js-slider 為 input 元素設定基本的 MDL 行為且是必需的。

序號

類名稱和說明

mdl-slider

將 input 元素標識為 MDL 元件且是必需的。

mdl-js-slider

為 input 元素設定基本的 MDL 行為且是必需的。

示例

以下示例將幫助您理解如何使用 mdl-slider 類來顯示不同型別的滑塊。

mdl_sliders.htm

即時演示

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link 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 Slider</td><td>Slider with initial value</td>
            <td>Disabled Slider</td></tr>
         <tr><td><input id = "slider1" class = "mdl-slider mdl-js-slider" type = "range" 
            min = "0" max = "100" value = "0" tabindex = "0" 
            oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
         <td><input id = "slider2" class = "mdl-slider mdl-js-slider" type = "range"  
            min = "0" max = "100" value = "25" tabindex = "0" 
            oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
         <td><input id = "slider3" class = "mdl-slider mdl-js-slider" 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: <div id = "message" >25</div>
   </body>
</html>

結果

驗證結果。

列印頁面

上一個

下一個