在前端开发中，进度条常常用于指示某个任务的当前进度以及预计完成时间等信息。Material Design 中提供了一种易于使用且美观的进度条控件，同时支持用户可滑动调整进度值。本文将详细介绍如何实现 Material Design 中的可滑动进度条，包含示例代码供学习参考。
前置知识
在阅读本文之前，建议先对 Material Design 中的进度条控件有一定的了解。此外，还需要掌握基本的 HTML、CSS 和 JavaScript。
实现步骤
1. 引入 Material Design 样式和组件库
首先，在 HTML 文件中引入 Material Design 样式和组件库，以确保进度条控件能够正常运行。可以通过下载官方的 Material Design Lite 包或者使用 CDN 进行引入。本文使用了 CDN 的方式。
<!-- 引入样式 --> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-indigo.min.css"> <!-- 引入组件库 --> <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
2. 创建进度条控件
接下来，在 HTML 文件中创建一个进度条控件，并设置相应的样式和属性。可以使用 Material Design 的组件库中提供的 mdl-slider 组件来创建进度条控件，同时可以自定义它的外观样式。
-- -------------------- ---- -------
---- ------- ---
---- ----------------- ---------------
------ ------------------------- ------------ ------- --------- --------- -------------
---- ------------------------------------
---- -------------------------------------------
---- -------------------------------------------
------
------
---- ----- ---
-------
----------- -
------ -----
-
------------------------------ ----------------------------- -
----------------- --------
-
----------------------------- -
-------- ----
-
----------------------------- -
-------- ----
-
------------------ -
----------------- --------
-
--------3. 实现可滑动效果
最后，在 JavaScript 文件中实现可滑动效果。可以通过监听 input 事件来更新进度条控件的值，并实时计算进度条的进度百分比。同时，还可以使用 Material Design 提供的 MaterialSlider 对象来获取和设置进度条的值。
-- -------------------- ---- ------- ---- -- ---------- -- --- ------- --------------------------- ---- - ---------- ------------ --- --- ------ - ----------------------------------------- -- -- ----- ---------- -------------------------------------------------------------------- ---------- - --- ----- - ---------------------------- --- --- - -------------------------- --- --- - -------------------------- --- ------- - ------ - ---- - ---- - ---- - ---- --------------------------- - ------- - -- ------ ---
示例代码
下面是完整的示例代码，供学习参考。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ------ ----------------
---- ---- ---
----- ---------------- ---------------------------------------------------------------
----- ---------------- ----------------------------------------------------------------------
---- ----- ---
-------
----------- -
------ -----
-
------------------------------ ----------------------------- -
----------------- --------
-
----------------------------- -
-------- ----
-
----------------------------- -
-------- ----
-
------------------ -
----------------- --------
-
--------
-------
------
---- ------- ---
---- ----------------- ---------------
------ ------------------------- ------------ ------- --------- --------- -------------
---- ------------------------------------
---- -------------------------------------------
---- -------------------------------------------
------
------
---- -- ---------- -- ---
------- ---------------------------
-------
--------- -------------------- ---- ------- -- - ---------- ------------ --- ------ - ----------------------------------------- -- -- ----- ---------- -------------------------------------------------------------------- ---------- - --- ----- - ---------------------------- --- --- - -------------------------- --- --- - -------------------------- --- ------- - ------ - ---- - ---- - ---- - ---- --------------------------- - ------- - -- ------ ---
总结
实现 Material Design 中的可滑动进度条，需要引入相应的样式和组件库，并创建进度条控件并设置样式和属性。最后，在 JavaScript 文件中监听 input 事件，实时计算进度条的进度百分比，从而实现可滑动效果。本文介绍的示例代码可以供初学者学习参考，同时也可以根据需求进行自定义优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fe5c0a95b1f8cacdd2ad64