Material Design Lite - Thanh trượt
MDL cung cấp một loạt các lớp CSS để áp dụng nhiều cải tiến hình ảnh và hành vi được xác định trước và hiển thị các loại menu khác nhau. Bảng sau liệt kê các lớp có sẵn và tác dụng của chúng.
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | mdl-slider Xác định yếu tố đầu vào là một thành phần MDL và là bắt buộc. |
| 2 | mdl-js-slider Đặt hành vi MDL cơ bản cho phần tử đầu vào và là bắt buộc. |
Thí dụ
Ví dụ sau sẽ giúp bạn hiểu cách sử dụng các lớp mdl-slider để hiển thị các loại thanh trượt khác nhau.
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>Kết quả
Xác minh kết quả.